使用CSS浮动li项可用于多个Ul项

Question

Let's take this html code:

<div>

    <ul>
        <li>aaa</li>
         <li>bbb</li>
         <li>ccc</li>
    </ul>

      <ul>
        <li>ddd</li>
         <li>fff</li>
         <li>eee</li>
    </ul>

</div>

The result is ok, of course. But, now I want to make all li items inside the ul s horizontally with the help of this CSS :

li{ 
    float:left;
    list-style:none;
}

But, the result is: fiddle

I can add </br> between div 's. But, it is not the correct way. Thanks.

Answer 1

Add a width property to li to distribute them horizontally and align the uls horizontally:

ul{
    text-align: center;
}
li{    
    float: left;
    list-style: none;
    width: 16.5%;
}

This will work for a fixed number of list items.

Answer 2

You can inline the <ul> elements inside the div.

ul {
    display:inline; 
    text-align:center; 
    margin:10px 0; // This is to avoid scrollbars in the demo, might not be necessary for you
    padding:0;
}

li {
    display:inline;
    list-style:none;
}

Here is a demo: http://jsfiddle.net/4pv6rby9/14/ .

Answer 3

use margin.

li{

    float:left;
    list-style:none;
    margin: 10px;
}

Use clear both- HTML:

    <ul>
        <li>aaa</li>
         <li>bbb</li>
         <li>ccc</li>
    </ul>
    <div style="clear:both;"></div>
      <ul>
        <li>ddd</li>
         <li>fff</li>
         <li>eee</li>
    </ul>

</div>

Answer 4

Use display: inline-block instead of float, it will be much easier to position other elements on page.

li{
    display: inline-block;
}

ul{
    text-align: center;
}

Fiddle