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

Question

我有一个问题是自动修复UL的宽度,LI可以直接漂浮.

如果我改变css,设置UL的宽度'1000px'不是'auto'; 我想要的就是可以做到的.

但是,是否还有其他任何设置只能通过CSS也可以达到相同的效果？因为我想自动更改UL的宽度作为增加LI的数量.

    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为inline-block而不是浮动它来实现这一点.然后,您应该white-space将ul设置nowrap为强制它们在同一行上.像这样的东西:

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

你现在可以添加任意数量的li,你的ul将继续增长.

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

• 这可能会产生一个水平滚动条,用户讨厌这些滚动条
• 您可能需要添加一些额外的css才能inline-block在旧版浏览器中完成工作
• 您的ul宽度不会超过其父级的宽度,如下面的小提琴示例所示.本li的实际上四溢他们的父母.不是一个问题,但在使用背景时你可能必须具有创造性ul.

对于演示该技术的简单小提琴:http://jsfiddle.net/KgyHZ/213/