Horizontal list items

Question

So, I have attempted to create a horizontal list for use on a new website I am designing. I have attempted a number of the suggestions found online already such as setting 'float' to left and such - yet none of these have worked when it comes to fixing the problem.

    ul#menuItems {
      background: none;
      height: 50px;
      width: 100px;
      margin: 0;
      padding: 0;
    }
    ul#menuItems li {
      display: inline;
      list-style: none;
      margin-left: auto;
      margin-right: auto;
      top: 0px;
      height: 50px;
    }
    ul#menuItems li a {
      font-family: Arial, Helvetica, sans-serif;
      text-decoration: none;
      font-weight: bolder;
      color: #000;
      height: 50px;
      width: auto;
      display: block;
      text-align: center;
      line-height: 50px;
    }

<ul id="menuItems">
  <li>
    <a href="index.php">Home</a>
  </li>
  <li>
    <a href="index.php">DJ Profiles</a>
  </li>
</ul>

Currently I am unsure of what is causing this issue, how would I go about and resolve it?

see http://css.maxdesign.com.au/listutorial/index.htm – George Birbilis Sep 16 '14 at 16:06 — George Birbilis, Sep 16 '14 at 16:06

What have you tried · Accepted Answer · 2022-01-04T00:56:02.180

154

Updated Answer

I've noticed a lot of people are using this answer so I decided to update it a little bit. No longer including support for now-unsupported browsers.

ul > li {
    display: inline-block;
    /* You can also add some margins here to make it look prettier */
}

<ul>
    <li> <a href="#">some item</a>

    </li>
    <li> <a href="#">another item</a>

    </li>
</ul>

edited Jan 04 '22 at 00:56

answered Mar 29 '13 at 20:11

What have you tried

11,018
4
31
45

3

upvoted answer because it does fix the issue, but floats are lame and old! unless ur using IE7-, u should be using `display:inline-block;` – PlantTheIdea Mar 29 '13 at 20:13
@LifeInTheGrey That is a great point - I will add that as a second option - Thank you for the tips – What have you tried Mar 29 '13 at 20:15
The list collapses when the browser window is resized - is there a way to prevent that? Ideally, the list should retain its horizontal layout no matter what. How can this be achieved? – zero_cool Sep 30 '14 at 15:55
@Jackson_Sandland Set a `min-width` on the `ul` element: `#my-list{ min-width: 780px; } ` – What have you tried Oct 01 '14 at 16:55
Why the zoom? Also is "*" in front of display a typo? – RayLoveless Sep 01 '21 at 18:17
@RayLoveless, no, the `*` is deliberate, but probably no longer needed as IE7 is pretty much dead. In the olden days, you could hack IE7 to work by placing an asterisk in front of a directive - modern browsers would ignore the whole line, while IE would parse it, and apply the attributes. – Zhaph - Ben Duguid Nov 01 '21 at 11:18

score 13 · Answer 2 · answered Nov 20 '20 at 18:19

13

I guess the simple solution i found is below

ul{
    display:flex;
}

answered Nov 20 '20 at 18:19

suban khoja

151
1
4

This suggestion fixed my problems! Thanks – Amboom Jun 01 '21 at 07:29
2

You may want to add ```justify-content: ``` for spacing the items within. – The Thirsty Ape Aug 16 '21 at 13:02
This did not work for me. – Anshuman Kumar Jan 22 '23 at 13:19

score 10 · Answer 3 · answered Mar 29 '13 at 20:14

10

This fiddle shows how

http://jsfiddle.net/9th7X/

ul, li {
    display:inline
}

Great references on lists and css here:

http://alistapart.com/article/taminglists/

answered Mar 29 '13 at 20:14

PaulProgrammer

16,175
4
39
56

Chances are good that your issue doesn't have anything to do with Bootstrap. It's more likely that your CSS has overrides that cause this `display:inline` directive to be ineffective. – PaulProgrammer Jan 21 '19 at 01:37
Firefox inspect element says that the rule is enabled: https://i.imgur.com/Picq9Lr.png – Aaron Franke Jan 21 '19 at 04:52
Does it work in the fiddle? If so, probably deserves its own question. – PaulProgrammer Jan 25 '19 at 17:06
1

@RayLoveless have a look at caniuse.com for the ancient stuff. – PaulProgrammer Sep 21 '21 at 18:46

score 6 · Answer 4 · answered Mar 29 '13 at 20:14

A much better way is to use inline-block, because you don't need to use clear:both at the end of your list anymore.

Try this:

<ul>
    <li>
        <a href="#">some item</a>
    </li>
    <li>
        <a href="#">another item</a>
    </li>
</ul>

CSS:

ul > li{
    display:inline-block;
}

Have a look at it here : http://jsfiddle.net/shahverdy/4N6Ap/

score 3 · Answer 5 · answered Mar 29 '13 at 20:16

3

You could also use inline blocks to avoid floating elements

<ul>
    <li>
        <a href="#">some item</a>
    </li>
    <li>
        <a href="#">another item</a>
   </li>
</ul>

and then style as:

li{
    /* with fix for IE */
    display:inline;
    display:inline-block;
    zoom:1;
    /*
    additional styles to make it look nice
    */
 }

that way you wont need to float anything, eliminating the need for clearfixes

answered Mar 29 '13 at 20:16

Jamie

189
6

I have attempted this, yet they're still not being shown horizontal - www.s4nr.com/SpecialTesting – Christopher Orchard Mar 29 '13 at 20:19
@LoadData your menu has a width of 100px and your li's have a combined width of 128px, so the second item will drop down to the next line. – Jamie Mar 29 '13 at 20:24

score 1 · Answer 6 · answered Jan 13 '23 at 17:40

1

strong tex

ul {
            list-style: none;
            display: flex;
            justify-content: space-around;
        }

        <ul>
            <li>bla</li>
            <li>blabla</li>
            <li>blablabla</li>
        </ul>

answered Jan 13 '23 at 17:40

SaBah

13
5

score 0 · Answer 7 · answered Mar 29 '13 at 20:28

Here you can find a working example, with some more suggestions about dynamic resizing of the list.

I've used display:inline-block and a percentage padding so that the parent list can dynamically change size:

display:inline-block;
padding:10px 1%;
width: 30%

plus two more rules to remove padding for the first and last items.

ul#menuItems li:first-child{padding-left:0;}
ul#menuItems li:last-child{padding-right:0;}

Horizontal list items

7 Answers7

Updated Answer

Linked

Related