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>

结果当然没问题。但是，现在我想在li的帮助下水平地在ul s内制作所有CSS项：

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

但结果是：fiddle

我可以在</br>之间添加div。但是，这不是正确的方法。谢谢。

Answer 1

向li添加一个width属性以水平分布它们并水平对齐uls：

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代替浮动，在页面上放置其他元素会容易得多。

li{
    display: inline-block;
}

ul{
    text-align: center;
}

Fiddle

使用css浮动li项目以获取多个UI项目

4 个答案: