2

我有一个包含 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中有什么可以做的吗？

4

1 回答 1

2

我不知道这可以通过 CSS 来完成。为了解决您的问题，我想出了一个 javascript/jQuery 解决方案。

请参阅工作中的jsFiddle演示。

在演示中使用ul max-height和li heightCSS 值来查看 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"
   });
于 2013-11-06T23:44:25.030 回答