试图获取菜单以内联html和css

Question

I have created a menu list in html using a list, i have added the list to a div called menu. In my css I have added display:inline to try and make the list to display the list inline, normally this works but for some reason it doesn't seem to work.

Here is my 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

if you want the list items to be inline:

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

or

#menu ul li{float:left;}

or

#menu ul li{display:inline;}

But don't forget to clearfix the float for the 2n option.

Answer 2

You need to put display inline on your ul li not ul since you only have one :)

So change your css to this:

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

You would need to apply the display: inline to li . Also remove the position: absolute from 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

Please try the next code, it will work for you. I've removed the &nbsp and update the css to apply the rules to li element.

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

I hope that helps :D

Answer 5

You have to put select the li instead of the ul. Also you have a width of 100px in your ul that doesn't let the li's to spread.

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

#menu ul li { display: inline; }