Vraag CSS horizontaal menu - gelijk verdeeld?


Ik heb een standaard CSS-menu, gemaakt met UL- en LI-tags. Ik wil dat ze de hele pagina gaan bekijken, horizontaal (niet mijn echte zaak, maar ik zal dit nemen om de situatie te vereenvoudigen). De items worden echter dynamisch gemaakt en daarom kan ik geen items naar LI-items of marges coderen.

Ik heb oplossingen gezien die JavaScript gebruiken om die waarden in te stellen, maar ik zou ze graag willen vermijden.

Ten slotte heb ik een redelijk goede oplossing gezien die aan het instellen is

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

Dit zal het gewenste gedrag in de meeste browsers creëren ... behalve voor IE.

Om het even welke ideeën?

EDIT: Bedankt voor de antwoorden. Omdat de code die de items genereert niet de mijne is, kan ik geen inline-stijlen instellen wanneer ik ze maak zonder JavaScript later te gebruiken.


12
2017-07-30 00:59


oorsprong


antwoorden:


U kunt de hoogte of breedte van een inline-element niet instellen. http://www.w3.org/TR/CSS2/visudet.html#inline-width

Proberen display:inline-block;

hier is de oplossing voor ie:

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

15
2017-09-08 18:43



Als u het element de volledige beschikbare ruimte wilt laten krijgen, hoeft u dit niet te definiëren a priori de breedte van de menu-elementen (het zal natuurlijk helpen bij het gelijkmaken van de li-elementen). U kunt dit probleem oplossen door aan de display eigendom.

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

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

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

Let daar op width:1%  Is benodigd om te voorkomen dat cellen inklappen.


14
2017-08-23 17:05



Als uw menu-items dynamisch worden gegenereerd (dus u weet niet hoeveel er eerder zullen zijn), kunt u een style="width:xx" toeschrijven aan de lis (of in <style> bovenaan ... of waar je ook wilt, echt waar). Waar xx zou moeten door width_of_parent_div_in_px/number_of_elements+'px'of 100/number_of_elements+'%'. De lis zou ook moeten zijn block-niveau-elementen, en floated left.


4
2017-07-30 01:10



#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.
}

De breedte: 18% kan ongeveer goed zijn als je 5 elementen over hebt, rekening houdend met rand en opvulling. Maar het zal variëren als gevolg van het aantal elementen dat u heeft, hoeveel opvulling, etc.


1
2017-07-30 01:04



Als u open staat voor het gebruik van Flexbox, is dat niet moeilijk. De volledige eer voor de code die ik ga posten gaat naar CSS-trucs omdat dit hun CSS is.

Hieronder ziet u een voorbeeld met voorvoegsels van leveranciers.

#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>

Het enige probleem met Flexbox is dat u IE 9 en lager moet ondersteunen, anders zie ik geen reden om Flexbox niet te gebruiken. Jij kan Bekijk hier de browserondersteuning voor Flexbox.


1
2017-07-01 03:53



Dit is wat voor mij werkte:

#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;
}

0
2017-12-05 18:16