使用CSS浮動li項可用於多個Ul項

Question

讓我們看一下這個html代碼：

<div>

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

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

</div>

結果當然可以。 但是，現在我想借助此CSS將ul內部的所有li項水平放置：

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

但是，結果是： 提琴

我可以在div之間添加</br> 。 但是，這不是正確的方法。 謝謝。

Answer 1

在li中添加width屬性，以使其水平分布並沿ul水平對齊：

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

這將適用於固定數量的列表項。

Answer 2

您可以內聯div中的<ul>元素。

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

這是一個演示： http : //jsfiddle.net/4pv6rby9/14/ 。

Answer 3

使用保證金。

li{

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

兩者都使用-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

使用display: inline-block而不是float，在頁面上放置其他元素會容易得多。

li{
    display: inline-block;
}

ul{
    text-align: center;
}

小提琴