CSS horizontales Menü - mit gleichem Abstand?

Question

Ich habe ein Standard-CSS-Menü wurde mit UL und LI-Tags. Ich brauche sie bekommen die ganze Seite zu bedecken, horizontal (nicht meinen richtigen Fall, aber ich werde dies die Situation zu vereinfachen nehmen). Allerdings werden die Elemente dynamisch erstellt und so bin ich nicht in der Lage jeden mit LI Artikeln zu codieren, noch Margen.

Ich habe Lösungen mit Hilfe von JavaScript gesehen, diese Werte zu setzen, aber ich würde wirklich lieben, sie zu vermeiden.

Schließlich habe ich eine ziemlich gute Lösung gesehen, die setzt

#menu {
    width: 100%;
    /* etc */
}
#menu ul {
    display: table;
}
#menu ul li {
    display: table-cell;
}

Dies wird das gewünschte Verhalten in den meisten Browsern ... außer IE erstellen.

Irgendwelche Ideen?

EDIT: Danke für die Antworten. Da jedoch der Code, der die Elemente erzeugt ist nicht von mir, ich bin nicht in der Lage Inline-Styles zu setzen, wenn sie später ohne Verwendung von JavaScript zu schaffen.

Answer 1

Sie können nicht die Höhe oder Breite eines Inline-Element festgelegt. http://www.w3.org/TR/CSS2/visudet.html # inline-Breite

Versuchen display:inline-block;

Hier ist die Lösung für das heißt:

display:inline-block;
zoom:1;
*display:inline;

Answer 2

Wenn Sie das Element erhält den gesamten zur Verfügung stehenden Raum lassen wollen, gibt es keine Notwendigkeit zu definieren, ist a priori die Breite der Menüelemente (natürlich wird es in gleicher Weise dazu beitragen, die li-Elemente Sizing ). Sie können dieses Problem lösen, indem sie auf der display Eigenschaft arbeiten.

#menu{
  display: table;
  width: 100%;
}

#menu > ul {
  display: table-row;
  width: 100%;
}

#menu > ul >li {
  display: table-cell;
  width:1%
}

Beachten Sie, dass width:1% erforderlich vermeiden Zelle kollabiert.

Answer 3

Wenn Ihre Menüpunkte werden dynamisch generiert werden (so wissen Sie nicht, wie viele es werden vor), dann können Sie ein style="width:xx" Attribut zu den lis hinzufügen (oder in <style> an der Spitze ... oder wo auch immer Sie bitte , Ja wirklich). Wo xx sollte entweder durch width_of_parent_div_in_px/number_of_elements+'px' oder 100/number_of_elements+'%'. Die lis sollte auch block-Level-Elemente und floated left sein.

Answer 4

#menu ul li {
    float: left;
    clear: none;
    display: inline;
    padding: 10px;
    height: 25px; //how tall you want them to be
    width: 18%; //you will need to set the width so that all the li's can fit on the same line.
}

Die Breite: 18% ungefähr richtig sein, wenn Sie 5 Elemente in einem Anteil von Grenze und Polsterung. Aber es wird variieren darauf zurückzuführen, wie viele Elemente, die Sie haben, wie viel Polsterung, usw.

Answer 5

Wenn Sie zur Verwendung Flexbox offen sind, dann ist es nicht schwer zu tun. Volle Punktzahl für den Code, den ich im Begriff bin zu schreiben geht href="https://css-tricks.com/almanac/properties/j/justify-content/" rel="nofollow"> CSS Tricks zum da dies ihre CSS.

Im Folgenden finden Sie ein Beispiel, die Verkäufer-Präfixe enthält.

#menu{
  
  list-style: none;
  
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-around; 
  justify-content: space-around; 
  
 }

<ul id="menu">
  <li>Home</li>
  <li>Store</li>
  <li>Blog</li>
  <li>About</li>
  <li>Contact</li>
</ul>

Das einzige Problem mit Flexbox ist, wenn Sie 9 IE unterstützen müssen und unten, sonst sehe ich keinen Grund, nicht Flexbox zu verwenden. Sie können href="http://caniuse.com/#feat=flexbox" rel="nofollow"> Ansicht Browser-Unterstützung für Flexbox hier

Answer 6

Hier ist, was für mich gearbeitet:

#menu{
    height:31px;
    width:930px;
    margin:0 auto;
    padding:3px 0px 0px 90px;
    color:#FFF;
    font-size:11px;
}
#menu ul{
    display:inline;
    width:930px;
    margin: 0 auto;
}
#menu ul li{
    list-style:none;
    padding:0px 0px 0px 0px;
    display:inline;
    float:left;
    width:155px;
}