Home/ Questions/Q 6921055
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T10:13:38+00:00

I am trying to build a simple horizontal list, where each list item is

  • 0

I am trying to build a simple horizontal list, where each list item is a div and I want them all to sit next to one another. When I try to use the code below though, the divs end up on separate lines. Here’s what I’ve got:

HTML:

<ul id="navlist">
<li><div>...</div></li>
<li><div>...</div></li>
<li><div>...</div></li>
</ul>

CSS:

#navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}

I have tried to give my divs a max width and a width but that doesn’t work either. Basically, they show up without bullet points on separate lines.

Some help on fixing this would be very appreciated, thanks!!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    #navlist li { display:inline }
#navlist div { display:inline }

    Making the <li> inline while leaving the <div> as block is your problem.

    Alternatively, you may want inline-block for the <li> if you are going to be controlling sizes or margins.

    You may also be interested in this demo: http://phrogz.net/JS/ul2menu/purecss_testsuite.html

    I’m not sure why you have <div> inside your <li>, but I presume you have your reasons.

    • 0