2

n li 要素を含むリストがあり、親の ul 要素には max-height ルールがあります。私がしたいのは、li要素がul要素をオーバーフローしたときにulの幅を広げることです。

それぞれ 20 ピクセルの高さの 20 個の li 要素があり、最大高さの値が 100 ピクセルであるとします。この場合、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デモを参照してください。

デモでと CSS の値ul max-heightをli height試して、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 に答える