Versuchen, ein Menü zu bekommen, inline mit HTML und CSS zu gehen

Question

Ich habe eine Menüliste in HTML mit einer Liste erstellt, ich habe die Liste zu einem div namens Menü hinzugefügt. In meinem CSS habe ich display: inline hinzugefügt, um zu versuchen, die Liste so zu gestalten, dass die Liste inline angezeigt wird. Normalerweise funktioniert das, aber aus irgendeinem Grund scheint es nicht zu funktionieren.

Hier ist mein Code

#menu ul { 
 
    width: 100px; 
 
    position: absolute; 
 
    z-index: 1; 
 
    background: white; 
 
    padding-top: 20px; 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
    display: inline; 
 
}

<div id="menu"> 
 

 
    <ul> 
 

 
    <li><a href="index.php">Home</a> 
 
    </li>&nbsp; &nbsp; &nbsp; 
 
    <li><a href="about.php">About Us</a> 
 
    </li>&nbsp; &nbsp; &nbsp; 
 
    <li><a href="Specials.php">Specials</a> 
 
    </li>&nbsp; &nbsp; &nbsp; 
 
    <li><a href="terms.php">Terms</a> 
 
    </li>&nbsp; &nbsp; &nbsp; 
 
    <li><a href="contact.php">Contact Us</a> 
 
    </li>&nbsp; &nbsp; &nbsp; 
 

 
    </ul> 
 

 
</div>

Answer 1

Sie benötigen eine CSS-Anzeige inline auf ul li setzen nicht ul, da Sie nur eine haben :)

So ändern zu diesem:

#menu ul li 
{ 

width: 100px; 
position: absolute; 
z-index: 1; 
background: white; 
padding-top: 20px; 
margin: 0; 
padding: 0; 
list-style:none; 
display:inline; 
} 

Answer 2

, wenn Sie die Listeneinträge wollen inline sein:

#menu ul li{display:inline-block;} 

oder

#menu ul li{float:left;} 

oder

#menu ul li{display:inline;} 

Aber vergessen Sie nicht, den Schwimmer für die 2n Option clearfix.

Answer 3

Sie müssten die display: inline auf li anwenden. Entfernen Sie auch die position: absolute von ul

#menu ul { 
 
    width: 100px; 
 
    z-index: 1; 
 
    background: white; 
 
    padding-top: 20px; 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
    display: inline; 
 
} 
 
#menu ul li { 
 
    display: inline; 
 
}

<div id="menu"> 
 

 
    <ul> 
 

 
    <li><a href="index.php">Home</a> 
 
    </li>&nbsp; &nbsp; &nbsp; 
 
    <li><a href="about.php">About Us</a> 
 
    </li>&nbsp; &nbsp; &nbsp; 
 
    <li><a href="Specials.php">Specials</a> 
 
    </li>&nbsp; &nbsp; &nbsp; 
 
    <li><a href="terms.php">Terms</a> 
 
    </li>&nbsp; &nbsp; &nbsp; 
 
    <li><a href="contact.php">Contact Us</a> 
 
    </li>&nbsp; &nbsp; &nbsp; 
 

 
    </ul> 
 

 
</div>

Answer 4

Bitte versuchen Sie den nächsten Code, es wird für Sie arbeiten. Ich habe die &nbsp entfernt und die CSS aktualisiert, um die Regeln auf li Element anzuwenden.

#menu li 
 
{ 
 
    width: 100px; 
 
    z-index: 1; 
 
    background: white; 
 
    padding-top: 20px; 
 
    margin: 0; 
 
    padding: 10px; 
 
    list-style:none; 
 
    display:inline; 
 
}

<div id ="menu"> 
 

 
<ul> 
 
    
 
<li><a href="index.php">Home</a></li> 
 
<li><a href="about.php">About Us</a></li> 
 
<li><a href="Specials.php">Specials</a></li> 
 
<li><a href="terms.php">Terms</a></li> 
 
<li><a href="contact.php">Contact Us</a></li> 
 

 
</ul> 
 

 
</div>

Ich hoffe, das hilft: D

Answer 5

Sie haben die li anstelle der ul setzen wählen. Auch haben Sie eine Breite von 100px in Ihrem ul, die die li's nicht verbreiten lassen.

#menu ul { 
    position: absolute; 
    z-index: 1; 
    background: white; 
    padding-top: 20px; 
    margin: 0; 
    padding: 0; 
    list-style:none; 
} 

#menu ul li { display: inline; }