9

我有一个问题来自动修复 LI 可以直接浮动的 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;
}

非常感谢您的建议。

4

1 回答 1

30

您可以通过将“li”设置为displayasinline-block而不是浮动它们来实现这一点。然后，您应该white-space将 ul 上的设置nowrap为强制它们都在同一行上。像这样的东西：

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

您现在可以添加任意数量的 li，并且您的 ul 将不断增长。

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

  • 这可能会产生一个水平滚动条，而用户讨厌那些
  • 您可能需要添加一些额外的 css才能inline-block在旧版浏览器中工作
  • 您的ul宽度不会超过其父级的宽度，如下面的小提琴示例所示。li's 实际上溢出了它们的父级。不是真正的问题，但在处理ul.

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

于 2013-06-13T20:15:54.240 回答