Comment garder <li> des éléments sur une seule ligne en largeur fixe <ul>?

J'ai un en-tête div et un menu ul ci-dessous. J'aimerais faire 2 choses:

1) le ul doit avoir la même largeur que la div (extérieur des bordures verticales exactement la même position x
2) je tiens à garder l'espacement entre les li éléments à peu près égale

Avec quelques essais et d'erreur sur la li's les marges et padding j'ai à peu près atteint le premier point dans Google Chrome (voir ce jsfiddle) mais dans Firefox, la li's ne rentrent pas dans le ul afin de ne pas rester sur une seule ligne. Aussi, la dernière li tend à débordement à une deuxième ligne lors d'un zoom in/out.

Je l'ai essayé avec margin:5px auto et padding:5px auto sur le li éléments, mais ici auto semble signifier zéro.

Est-ce vraiment difficile/impossible ou suis-je surplombant quelque chose d'évident?

J'ai aussi essayé width:fit-contents mais cela n'a pas aide non plus.

supprimer la lettre de l'espacement de ul#mmenu li
Je ne vois pas la différence entre FF & CR dans les votre violon.. pouvez-vous poster une capture d'écran expliquant le désir de comportement?

OriginalL'auteur RubenGeert | 2013-08-22

  1. 10

    J'ai édité un tas dans votre CSS, vérifier la mise à jour de violon.

    Fondamentalement, ce est ce que j'ai fait:

    HTML:

    <ul>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
</ul>

    CSS:

    ul {
    width: 960px;
    display: table;
    table-layout: fixed;
}
ul li {
    display: table-cell;
}
ul li a {
    display: block;
}

    L'ul est présenté comme une table, avec la li de la table de cellules, ce qui en fait la largeur de l'en-tête. À l'intérieur de la batterie au lithium-je afficher les ancres comme un bloc, en faisant d'eux de remplir l'ensemble de la li. Espérons qu'il vous convient.

    P. s. assurez-vous de supprimer la classe cf de la ul lorsque vous utilisez ce.

    Ce bien fonctionner, bien que généralement, je dis aux gens même si c'est parfaitement possible solution, à moins que votre affaire avec des données tabulaires, pourquoi ne pas utiliser d'autres options
    Eh bien, ce qui rend les éléments loi comme un tableau, n'étant pas un tableau. Je n'ai pas l'esprit à l'aide de cette. Ça me dérange plus quand les gens essaient d'utiliser la liste ou divs pour afficher des données tabulaires. (hors-sujet)
    Super! Qui semble faire l'affaire parfaitement bien!

    OriginalL'auteur LinkinTED

  2. 6

    Je pense que certains membres de la frustre peut trouver cela utile: 

    .main-menu ul li ul li{
  white-space: nowrap;
}

    OriginalL'auteur Fable4Life

  3. 1

    Comme ce

    ul#mmenu li
{
padding:7px;
}

    DÉMO

    OriginalL'auteur Falguni Panchal

  4. 0

    Vous aurez besoin d'ajuster le rembourrage en ul#mmenu j'ai changé le rembourrage pour padding:7px 23px; et il reste sur une seule ligne,mais il y a un espace vide à l'extrémité droite de la dernière menu.

    OriginalL'auteur Sharath Daniel

  5. 0

    Vous pouvez donner la position absolue de li éléments et de leur position (d'abord à gauche:0, la deuxième: left:100px ou alors... dernière ont droit:0 et ainsi de suite). De cette manière, ils seront toujours au même endroit lorsque vous effectuez un zoom avant.

    OriginalL'auteur Vladislav Stanic

  6. 0

    Pour ceux qui veulent éviter CSS table et table-cell, qui, par la manière, je n'ai pas de problème avec vous pouvez utiliser text-align:justify sur le UL avec un couple de réglages.

    HTML de base:

    <ul id='mmenu'>
   <li><a href='#'>Blah Blah Blah Blah</a></li>
   <li><a href='#'>Blah Blah</a></li>
   <li><a href='#'>Blah Blah Blah Blah</a></li>
   <li><a href='#'>Blah Blah</a></li>
</ul>

    Noter que nous avons perdu la clearfix, parce que: a) Nous n'allons pas utiliser des flotteurs et b), il s'affranchit de cette solution.

    CSS: 

    ul#mmenu{
   width:100%;
   margin:15px 0 10px 0;
   overflow:hidden;
   text-align:justify; /*Added this*/
}

ul#mmenu li{
   letter-spacing:.05em;
   color:#0a93cd;
   /*Now inline blocks instead of blocks floated left*/
   display:inline-block; 
   font:24px arial;
   padding:7px 26px;
   background:#fff;
   border-left:2px solid #0a93cd;
   border:2px solid #0a93cd;
   border-radius:13px;
   text-align:center;
}

/*Now for the hacky part....
  ...justify does not, by design, justify the last row of text
  therfore we need to add an additional, invisible line*/
ul#mmenu:after {
   content: "";
   width: 100%;
   display: inline-block;
}

    J'ai également supprimé les :first-child style dans le Mis À Jour Le Violon

    J'ai besoin d'afficher plus de li en ligne unique et si la largeur en bas, alors il va se cacher le contenu avec plus de flux cachés jsfiddle.net/patelmit69/y4ANj/59

    OriginalL'auteur Jon P