css - CSS中容器的扩展宽度

Question

我有一个包含 n li 元素的列表，并且父 ul 元素具有最大高度规则。我想要的是当 li 元素溢出 ul 元素时扩展 ul 的宽度。

假设我有 20 个 li 元素，每个元素高度为 20px，最大高度值为 100px。在本例中，ul 元素必须有 20/(100px/20px)=4 列。

当我有固定宽度值时，CSS 会自动扩展 ul 的高度，但在固定高度下，我找不到任何方法来根据 li 元素的数量扩展其宽度。

我尝试了具有明确规则的 nth-child 选择器，但它不起作用: http://jsfiddle.net/Rhm9f/

<ul>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
</ul>

CSS 部分:

ul li {
    width:50px;
    background:#eee;
    list-style:none;
    float:left;
}
div {
    width:200px;
    overflow:hidden;
    border:1px solid red;
}
ul {
    max-height:100px;
    overflow:auto;
    width:auto;
    position:absolute;
    border:1px solid gray

}
ul li:nth-child(5n+1) {
    background:red;
    clear:both
}

CSS 中有类似的东西吗？

Answer 1

我不知道有什么方法可以只用 CSS 来实现这一点。为了解决您的问题，我想出了一个 javascript/jQuery 解决方案。

查看工作 jsFiddle演示。

在演示中尝试使用 ul max-height 和 li height CSS 值查看 jQuery 如何处理不同的值。这是一个非常巧妙的小解决方案。

---

HTML

<ul>
    <li>test 01</li>
    <li>test 02</li>
    <li>test 03</li>
    <li>test 04</li>
    <li>test 05</li>
    <li>test 06</li>
    <li>test 07</li>
    <li>test 08</li>
    <li>test 09</li>
    <li>test 10</li>
    <li>test 11</li>
    <li>test 12</li>
    <li>test 13</li>
    <li>test 14</li>
    <li>test 15</li>
    <li>test 16</li>
    <li>test 17</li>
    <li>test 18</li>
    <li>test 19</li>
    <li>test 20</li>
</ul>

---

CSS

ul 
{
    max-height:100px;
    position:absolute;
    border:1px solid gray;
}
ul li 
{
    width:50px;
    height:20px;
    background:#eee;
    list-style:none;
    float: left;
    margin: 0; 
    padding: 0;
    border: none;
}

---

jQuery

var $ul = $("ul");
    $listItems = $ul.find("li"),
    listItemCount = $listItems.length,
    listItemHeight = parseInt($listItems.css("height")),
    maxHeight = parseInt($ul.css("max-height")),
    numberOfRows = Math.floor(maxHeight / listItemHeight),
    numberOfColumns = Math.ceil(listItemCount / numberOfRows);

$ul.find("li:nth-child(" + numberOfColumns.toString() + "n+1)")
   .css
   ({ 
      "clear": "both", 
      "background": "red"
   });