如何使用HTML和CSS内联显示列表

Question

I am trying to create a menu using html, I have added my link in an unordered list (ul) has shown below. In my css i added a display:inline; to the links so that they would display in a link like a menu but for some reason it doesn't seem to work.

 #menu a { text-decoration: none; } #menu ul { list-style: none; } #menu ul li a { 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="offers.php">Special Offers</a> </li> <li><a href="staff.php">Meet Our Staff</a> </li> <li><a href="contact.php">Contact</a> </li> </ul> </div> 

Answer 1

You are targeting the anchors, which are already inline by default. I believe you mean to target the list items:

#menu ul li {
    display: inline;
}

JSFiddle

Answer 2

Try this: ul li { float: left; padding-right:10px; } ul li { float: left; padding-right:10px; }

https://jsfiddle.net/n4aak3nk/1/

Answer 3

You were very close!

The only thing wrong with your code, is that display: inline; should be on your <li> elements instead of your <a> elements :

 #menu a { text-decoration: none; } #menu ul { list-style: none; } #menu ul li { 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="offers.php">Special Offers</a> </li> <li><a href="staff.php">Meet Our Staff</a> </li> <li><a href="contact.php">Contact</a> </li> </ul> </div> 

(see also this Fiddle )