Trying to get a menu to go inline with html and 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>

Possible duplicate of [How to make a HTML list appear horizontally instead of vertically using CSS only?](http://stackoverflow.com/questions/2145181/how-to-make-a-html-list-appear-horizontally-instead-of-vertically-using-css-only) — KWeiss, Apr 12 '16 at 13:00

Anoxy · Accepted Answer · 2016-04-14T07:30:51.050

0

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

edited Apr 14 '16 at 07:30

answered Apr 12 '16 at 12:56

Anoxy

873
7
17

score 0 · Answer 2 · edited Apr 12 '16 at 13:18

0

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.

edited Apr 12 '16 at 13:18

answered Apr 12 '16 at 12:57

imvain2

15,480
1
16
21

score 0 · Answer 3 · answered Apr 12 '16 at 12:58

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>

score 0 · Answer 4 · answered Apr 12 '16 at 13:01

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

score 0 · Answer 5 · answered Apr 12 '16 at 13:05

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

Trying to get a menu to go inline with html and css

5 Answers5