Le HTML & CSS: Comment créer quatre taille égale, les onglets de remplissage de 100% de la largeur?

Je suis en train de créer un panneau de navigation de mon site web. J'aimerais qu'il se composent de:

Quatre onglets de taille égale avec texte centré dans chaque onglet.
Ils doivent remplir l'ensemble de la largeur de la page.

J'aimerais vraiment que la conception de l'être flexible et compatible avec les navigateurs. J'ai essayé différents float techniques, mais je ne peux pas le faire fonctionner. J'espère que vous pourrez m'aider!

Merci.

InformationsquelleAutor nodesto | 2012-08-18

16

HTML

EDIT: c'est 2015 et HTML5 a été là pendant un certain temps; code suivant doit être à l'intérieur d'un nav élément (html5doctor) avec point de repère ARIA attribut role="navigation" sur elle (et 99,9% du temps être unique dans une page donnée).

Un panneau de navigation doit utiliser une liste non ordonnée de liens:
```
<ul id="nav">
  <li><a href="#">One</a></li>
  <li><a href="#"> Second</a></li>
  <li><a href="#">Third</a></li>
  <li><a href="#">Fourth and last, so large that... worst case</a></li>
</ul>
```
CSS

EDIT2: C'est en 2017, il suffit d'utiliser Flexbox (avec ou sans flex-wrap: wrap)

inline-block est utile, mais elle a un inconvénient: l'espace entre deux éléments doivent être gérés avec soin. Si retiré ou pas </li> en HTML5 ou </li> au début de la ligne suivante coincé comme </li><li>next item ou d'autres astuces, vous avez toujours à faire quelque chose ou il va créer un ~4px écart entre les 2 éléments.

25% + 25% + 25% + 25% n'est pas égal à 100% sur tous les navigateurs si le total n'est pas un multiple de 4. Chaque navigateur a sa propre méthode d'arrondi.

Si vous souhaitez que des éléments à un total de 100% de la largeur et de la même largeur, une autre méthode consiste à utiliser display: table (et table-cell) avec table-layout: fixed de forcer les navigateurs à utiliser le autres table algorithme, le seul qui n'essayez pas d'adapter la largeur des cellules de contenu, mais de respecter les largeurs voulu par le concepteur/développeur autant que possible.
```
ul {
  margin: 0;
  padding: 0;
}
li {
  list-style-type: none;
}
#nav {
  display: table;
  table-layout: fixed;
  text-align: center;
}
#nav li {
  display: table-cell;
  width: 25%;
  padding-right: 1px;
  height: auto;
  vertical-align: bottom;
}
#nav a {
  display: block;
  min-height: 100%;
  padding: 4px 10px;
  background-color: #222;
  color: white;
  border-radius: 6px 6px 0 0;
}
```
Violon

http://jsfiddle.net/PhilippeVay/aHCy3/1/

edit: http://jsfiddle.net/PhilippeVay/aHCy3/2/ avec une autre méthode pour l'espace entre chaque onglet, avec l'aimable autorisation de mon collègue.
- Je vous remercie. Pourquoi ne pas les deux derniers <li> a class="onglet"?
- Oups, en fait j'ai oublié de supprimer les 2 autres .tab à partir de leurs propres élément de la liste. Comme il y a un id #nav sur ul, cette classe n'est plus nécessaire, li sont de style avec le sélecteur #nav li. Le violon, le lien et le code HTML d'édition.
- Ah, maintenant je vois, merci Felipe!
- une autre méthode pour l'espace entre chaque onglet: voir le nouveau violon, avec border-spacing)
- Vous êtes génial, j'ai été coincé sur ce pour un peu.
InformationsquelleAutor FelipeAls
4

Vous n'avez pas besoin de flotteurs pour cela. Il suffit de régler la largeur de 25%, ou un tout petit peu moins de 25%. Si vous êtes en utilisant ce sur un bloc de niveau élément, un ensemble display: inline-block. Cela fonctionne pour tous les navigateurs de tailles, ainsi que de répondre à la fenêtre de redimensionnement.

HTML
```
<div class="nav">Nav 1</div>
<div class="nav">Nav 2</div>
<div class="nav">Nav 3</div>
<div class="nav">Nav 4</div>
```
CSS
```
body, html {
    width: 100%;
    padding: 0;
    margin: 0;
}
.nav {
    width: 24%; /*Slightly less than 1/4th of the width*/ 
    display: inline-block;
    padding: 0;
    margin: 0;
    text-align: center;
}
```
démo
- +1, mais vous pourriez vouloir mettre à jour la démo, parce que la révision actuelle a encore width: 25%.
- Fait. Également ajouté text-align:center depuis l'OP veut que le texte soit centré.
- Pourquoi 24% et non de 25%? L'ajout de synopsis: 1px dashed darkred;, montre que la largeur n'est pas de 100% exactement. 24.5% serait mieux (mais pas encore parfait, pour la même raison)
- Ne devriez-vous pas mettre les 4 divisions à l'intérieur de l'autre "wrapper" div, et un centre d'?
- Un "panneau de navigation" ne devrait pas utiliser div éléments, mais nav>ul>li*4>a (en ZenCoding notation) en HTML5 (même sans nav dans le HTML4.01/XHTML1.0)
InformationsquelleAutor xbonez
0

css:
```
.tab {
    float: left;
    width:25%;
    height:25px;
    background:black;
    border:1px solid #fff;
    box-sizing: border-box;
}
```
html:
```
<div class="tab"></div>
<div class="tab"></div>
<div class="tab"></div>
<div class="tab"></div>
```
jsfiddle: http://jsfiddle.net/zP7Xh/6/
- Pourquoi auriez-vous besoin inline-block si vous flotter? C'aurez également besoin de deux préfixé box-sizing de la propriété et un clearfix sur parent.
- Boîte de dimensionnement en est ainsi, les frontières ne pas augmenter la largeur des boutons, à des fins d'affichage. Cette css fonctionne très bien, regardez le jsfiddle.
- (il ne fonctionne pas dans le navigateur que j'utilise comme je n'utilise pas Chrome, mais c'est juste vendeur préfixes ajoutés plus tard, comme je l'ai fait dans mon fiddle, Mon point n'est pas sur box-sizing mais inline-block: supprimer inline-block et il fonctionne toujours. Éléments flottants qui sont renderd comme block par défaut est déjà OK, pas besoin de changer leur écran.
- Ah j'ai mal lu, l'affichage est inutile, en effet, et je n'ai fait que tester sur Chrome.
InformationsquelleAutor mash

Vous devez vous connecter pour publier un commentaire.