web-dev-qa-db-fra.com

Comment étendre un nombre fixe d'éléments de navigation horizontale de manière uniforme et complète sur un conteneur spécifié

Je voudrais étendre 6 éléments de navigation uniformément sur un conteneur de 900px, en laissant un espace blanc égal entre eux. Par exemple...

---| 900px Container |---

---| HOME    ABOUT    BASIC SERVICES    SPECIALTY SERVICES    OUR STAFF    CONTACT US |---

Actuellement, la meilleure méthode que je puisse trouver pour ce faire est la suivante:

nav ul {
  width: 900px; 
  margin: 0 auto;
}

nav li {
  line-height: 87px;
  float: left;
  text-align: center;
  width: 150px;
}

Le problème avec ceci est double. Tout d'abord, cela ne le justifie pas vraiment, mais étend plutôt les balises li uniformément dans toute la balise ul. Créant ainsi un espace blanc inégal entre les éléments de menu plus petits tels que "HOME" ou "ABOUT" et les plus grands tels que "BASIC SERVICES". .

Le deuxième problème est que la mise en page se brise si un élément de navigation est supérieur à 150 pixels, ce qui est le cas de SERVICES SPÉCIALISÉS, même s'il y a suffisamment d'espace pour l'ensemble de la navigation.

Quelqu'un peut-il résoudre ce problème pour moi? J'ai parcouru le Web à la recherche de solutions, et elles semblent toutes manquer. CSS/HTML seulement si possible ...

Merci!

UPDATE (29/07/13): L'utilisation de la méthode tableau-cellule est le meilleur moyen moderne d'implémenter cette présentation. Voir la réponse de Félix ci-dessous. Le table cell propriété fonctionne sur 94% des navigateurs actuellement. Vous devrez faire quelque chose à propos de IE7 et des versions antérieures, mais sinon, ça devrait aller.

UPDATE (30/07/13): Malheureusement, il existe un bogue Webkit qui a un impact si vous combinez cette présentation avec des requêtes multimédia. Pour le moment, vous devrez éviter de changer la propriété 'display'. Voir le bogue Webkit.

MISE À JOUR (25/07/14): Il existe une meilleure solution à ce problème ci-dessous impliquant désormais text-align: justifier. Utiliser ceci est plus simple et vous éviterez le bogue Webkit.

htmlcssnavigationjustify
67
timshutes

Utilisation text-align:justify sur le conteneur, ainsi cela fonctionnera quel que soit le nombre d'éléments de votre liste (vous n'avez pas à calculer le% width pour chaque élément de la liste

VIOLON 

<ul id="nav">
    <li><a href="#">HOME</a></li>
    <li><a href="#">ABOUT</a></li>
    <li><a href="#">BASIC SERVICES</a></li>
    <li><a href="#">OUR STAFF</a></li>
    <li><a href="#">CONTACT US</a></li>
</ul>

CSS

#nav {
    text-align: justify;
    min-width: 500px;
}
#nav:after {
    content: '';
    display: inline-block;
    width: 100%;
}
#nav li {
    display: inline-block;
}
94
Danield

Celui-ci fonctionne vraiment. L'avantage est également que vous pouvez utiliser les requêtes multimédia pour désactiver facilement le style horizontal, par exemple si vous souhaitez les empiler verticalement sur un téléphone mobile.

HTML

<ul id="nav">
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
</ul>

CSS

​
#nav {
    display: table;
    height: 87px;
    width: 100%;
}

#nav li {
    display: table-cell;
    height: 87px;
    width: 16.666666667%;  /* (100 / numItems)% */
    line-height: 87px;
    text-align: center;
    background: #ddd;
    border-right: 1px solid #fff;
    white-space: nowrap;
}​

@media (max-width: 767px) {
    #nav li {
        display: block;
        width: 100%;
    }
}

http://jsfiddle.net/timshutes/eCPSh/416/

38
felix

si vous le pouvez, utilisez flexbox:

<ul>
    <li>HOME</li>
    <li>ABOUT US</li>
    <li>SERVICES</li>
    <li>PREVIOUS PROJECTS</li>
    <li>TESTIMONIALS</li>
    <li>NEWS</li>
    <li>RESEARCH &amp; DEV</li>
    <li>CONTACT</li>
</ul>

ul {
  display: flex;
  justify-content:space-between;
  list-style-type: none;
}

jsfiddle: http://jsfiddle.net/RAaJ8/

Le support du navigateur est en fait assez bon (avec les préfixes un autre truc méchant): http://caniuse.com/flexbox

14
trias

Une solution idéale va:

  1. Redimensionne automatiquement à la largeur du conteneur de navigation
  2. Soutenir un nombre dynamique d’éléments de menu.

En utilisant un simple menu ul à l'intérieur d'un conteneur nav, nous pouvons construire une solution qui répond aux exigences ci-dessus.

HTML

<nav>
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Basic Services</li>
    <li>Specialty Services</li>
    <li>Our Staff</li>
    <li>Contact Us</li>
  </ul>
</nav>

Premièrement, nous devons forcer le ul à avoir toute la largeur de son conteneur nav. Pour ce faire, nous utiliserons le :after psuedo-element avec width: 100%.

Cela permet d'atteindre parfaitement notre objectif, mais ajoute des espaces à la fin de l'élément psuedo. Nous pouvons supprimer cet espace sur tous les navigateurs via IE8 en définissant le paramètre line-height du ul à 0 et le ramener à 100% sur ses li enfants. Voir l'exemple CodePen et la solution ci-dessous:

CSS

nav {
  width: 900px;
}

nav ul {
  text-align: justify;
  line-height: 0;
  margin: 0;
  padding: 0;
}

nav ul:after {
  content: '';
  display: inline-block;
  width: 100%;
}

nav ul li {
  display: inline-block;
  line-height: 100%;
}
7
Anthony DiSanti

J'ai essayé tout ce qui précède et je les ai trouvés désireux. C’est la solution la plus simple et la plus flexible que j’ai pu trouver (grâce à tout ce qui précède pour inspiration).

HTML

<div id="container">
<ul>
    <li>HOME</li>
    <li>ABOUT US</li>
    <li>SERVICES</li>
    <li>PREVIOUS PROJECTS</li>
    <li>TESTIMONIALS</li>
    <li>NEWS</li>
    <li>RESEARCH &amp; DEV</li>
    <li>CONTACT</li>
</ul>
</div>

CSS

div#container{
  width:900px;
  background-color:#eee;
    padding:20px;
}
ul {
    display:table;
    width: 100%;
    margin:0 0;
    -webkit-padding-start:0px; /* reset chrome default */
}
ul li {
    display:table-cell;
    height:30px;
    line-height:30px;
    font-size:12px;    
    padding:20px 10px;
    text-align: center;
    background-color:#999;
    border-right:2px solid #fff;
}
ul li:first-child {
    border-radius:10px 0 0 10px;
}
ul li:last-child {
    border-radius:0 10px 10px 0;
    border-right:0 none;
}

Vous pouvez évidemment laisser tomber les premier/dernier bouts arrondis, mais je pense qu'ils sont vraiment purs (et votre client aussi;)

La largeur du conteneur limite la liste horizontale, mais vous pouvez l'abandonner et simplement appliquer une valeur absolue à l'UL si vous le souhaitez.

Violons-le, si tu veux ..

http://jsfiddle.net/tobyworth/esehY/1/

3
Astravagrant

Cela devrait le faire pour vous.

<div id="nav-wrap">
    <ul id="nav">
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul>
</div>

#nav-wrap {
    float: left;
    height: 87px;
    width: 900px;
}

#nav {
    display: inline;
    height: 87px;
    width: 100%;
}

.nav-item {
    float: left;
    height: 87px;
    line-height: 87px;
    text-align: center;
    text-decoration: none;
    width: 150px;

}
2
Brian

C’est le genre de choses que le modèle CSS flexbox va corriger, car il vous permettra de spécifier que chaque li recevra une proportion égale de la largeur restante.

1
Neil

Avez-vous essayé de régler la largeur de li sur, par exemple, 16% avec une marge de 0,5%?

nav li {
  line-height: 87px;
  float: left;
  text-align: center;
  width: 16%;
  margin-right: 0.5%;
}

edit: Je voudrais définir l'UL à 100% largeur:

nav ul {width: 100%; marge: 0 auto; }

1
BJ Safdie

J'ai essayé tellement de choses différentes et j'ai finalement trouvé que ce qui fonctionnait le mieux pour moi était simplement d'ajouter padding-right: 28px;

J'ai joué avec le rembourrage pour obtenir la bonne quantité d'espacer uniformément les éléments.

1
Jen
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#container { width: 100%; border: 1px solid black; display: block; text-align: justify; }
object, span { display: inline-block; }
span { width: 100%; }
</style>
</head>

  <div id="container">
    <object>
      <div>
      alpha
      </div>
    </object>
    <object>
      <div>
      beta
      </div>
    </object>
    <object>
      <div>
      charlie
      </div>
    </object>
    <object>
      <div>
      delta
      </div>
    </object>
    <object>
      <div>
      epsilon
      </div>
    </object>
    <object>
      <div>
      foxtrot
      </div>
    </object>
    <span></span>
  </div>
</html>
0
Paul Sweatte

Au lieu de définir la largeur, vous pouvez simplement mettre une marge à gauche sur votre li, de sorte que l'espacement soit cohérent, et vous assurer que la ou les marges + li correspondent à 900px.

nav li {
  line-height: 87px;
  float: left;
  text-align: center;
  margin-left: 35px;
}

J'espère que cela t'aides.

0
TNC