html - li 增加时 CSS 自动更改 ul 宽度(向左浮动)

Question

我在自动修复 LI 可以直接 float 的 UL 宽度时遇到问题。

如果我更改 css，请将 UL 的宽度设置为 '1000px'，而不是 'auto'；我想要的可以完成。

但是，是否有其他任何设置仅通过 CSS 也可以达到相同的结果？因为我想随着 LI 数量的增加自动更改 UL 的宽度。

    Now is like
    div ul-------------------------------div ul
            |   ///////      ////////       |
            |   /////// li   ///////  li    | 
            ---------------------------------
               ///////     ////////
               ////// li   ///////  li

   I want to be like this  
        div                                 div
          ul-------------------------------------------------------------ul
            |   ///////      ////////       |  ///////      ////////    |
            |   /////// li   ///////  li    | /////// li   ///////  li  |
            -------------------------------------------------------------

http://jsfiddle.net/KgyHZ/21/

HTML

<div class='test'>
    <ul>
        <li></li>
        <li></li> 
        <li></li>
        <li></li>
    </ul>
</div>

CSS

.test{
    width: 500px;
    height: 100px;
    overflow: hidden;
}
.test > ul{
    list-style:none;
    width: auto;
    height: 100%;
    background-color:#999;
    display: block;
    padding: 0px;
    margin: 0px;
}
.test > ul > li{
    float: left;
    display: block;
    height: 100%;
    width: 180px;   
    background-color:#99c;
    margin-right:10px;
}

非常感谢您的建议。

Answer 1

您可以通过将“li”设置为 display as inline-block 而不是 float 它们来实现此目的。然后，您应该将 ul 上的 white-space 设置为 nowrap 以强制它们全部位于同一行。像这样:

ul{
    list-style:none;
    white-space: nowrap;
}
ul > li{
    display: inline-block;
}

您现在可以根据需要添加任意数量的 li，并且您的 ul 会不断增长。

使用此技术时应考虑以下几点:

• 这可能会产生一个水平滚动条，而用户讨厌那些
• 您可能需要添加一些 extra css使 inline-block 在 legacy browsers 中工作
• 您的 ul 宽度不会超过其父级的宽度，如下面的 fiddle 示例所示。 li 实际上溢出了它们的父级。这不是真正的问题，但在 ul 上处理背景时，您可能需要发挥创意。

演示该技术的简单 fiddle :http://jsfiddle.net/KgyHZ/213/