为多个Ul项使用css浮动li项

Floating li items with css for more than one Ul items

本文关键字：css 浮动 li Ul      更新时间：2023-09-26

让我们看看下面的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 s中的所有li项水平放置:

li{ 
    float:left;
    list-style:none;
}
但是，结果是:

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

可以在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/。

为li添加一个width属性，使它们水平分布并水平对齐:

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

使用margin。

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

使用清除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>

使用display: inline-block代替float，将更容易在页面上定位其他元素。

li{
    display: inline-block;
}
ul{
    text-align: center;
}

小提琴

相关文章：