Question

我有一个包含n li元素的列表，而父ul元素有一个max-height规则。我想要的是当li元素溢出ul元素时扩展ul的宽度。

假设我有20个li元素，每个元素高度为20px，最大高度值为100px。在这种情况下，ul元素必须具有20 /（100px / 20px）= 4列。

当我有一个固定的宽度值时，CSS会自动扩展ul的高度但是在固定的高度我无法找到任何方法来扩展其宽度相对于li元素的数量。

我尝试了明确规则的n-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"
   });

在CSS中扩展容器的宽度

1 个答案:

HTML

CSS

的jQuery