Question

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

如果我更改了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来代替浮动它们来实现此目的。然后，您应该将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宽度不会超过其父级的宽度，如下面的小提琴示例所示。实际上li溢出了他们的父母。不是一个问题，但在使用ul上的背景时，您可能需要具有创造性。

这是一个演示技巧的简单小提琴：http://jsfiddle.net/KgyHZ/213/

li增加时CSS自动更改ul宽度（向左浮动）

1 个答案: