列あたり2つのリスト項目を持つ複数列プロパティ

Question

私は、順序付けられていないリストをスタイルするためにCSS3複数列プロパティを使用します。

1列あたり2つのリスト項目で合計2行8列にしたいと考えています。

しかし、実際には1つの列に3つのリスト項目があります。単語の長さが短い場合などです。最初の3つのリストアイテム "New In"、 "Sale"、および "Looks"は同じ列にあります。

<ul class="subnav-links"> 
    <li class="new-in "> 
    <a href="/de/t/new">New In</a> 
    </li> 
    <li class="sale "> 
    <a href="/de/t/sale">Sale</a> 
    </li> 
    <li class="looks "> 
    <a href="/de/pages/best_looks">Looks</a> 
    </li> 
    ...more lis omitted 
</ul> 

とCSS：

ul.subnav-links { 
    -moz-column-count: 8; 
    -webkit-column-count: 8; 
    column-count: 8; 
    -moz-column-gap: 0; 
    -webkit-column-gap: 0; 
    column-gap: 0; 
    list-style-type: none; 
} 
li { 
    display: inline-block; 
    max-width: 90%; 
    width: 80px; 
    word-break: keep-all; 
} 
form { 
    float: right; 
} 

JSfiddle demo

どのように1列に2リスト項目の最大値を取得するために管理することができますか？

Answer 1

width: 100%;を追加すると、問題が解決するはずです。あなたが密接に最初の列は3つのリスト項目が含まれて見ると

ul.subnav-links { 
 
    -moz-column-count: 8; 
 
    -webkit-column-count: 8; 
 
    column-count: 8; 
 
    -moz-column-gap: 15px; 
 
    -webkit-column-gap: 15px; 
 
    column-gap: 15px; 
 
    -moz-column-width: 60px; 
 
    -webkit-column-width: 60px; 
 
    column-width: 60px; 
 
    list-style-type: none; 
 
    height: 40px; 
 
} 
 
li { 
 
    display: inline-block; 
 
    word-break: keep-all; 
 
    width: 100%; 
 
} 
 
form { 
 
    float: right; 
 
}

<ul class="subnav-links"> 
 
    <li class="new-in "> 
 
    <a href="/de/t/new">New In</a> 
 
    </li> 
 
    <li class="sale "> 
 
    <a href="/de/t/sale">Sale</a> 
 
    </li> 
 
    <li class="looks "> 
 
    <a href="/de/pages/best_looks">Looks</a> 
 
    </li> 
 
    <li class="inspiration "> 
 
    <a href="/de/inspiration">Inspiration</a> 
 
    </li> 
 
    <li class=" "> 
 
    <a href="/de/t/women/Pullovers">Pullovers</a> 
 
    </li> 
 
    <li class=" "> 
 
    <a href="/de/t/women/Jackets">Jackets</a> 
 
    </li> 
 
    <li class=" "> 
 
    <a href="/de/t/women/Skirts">Skirts</a> 
 
    </li> 
 
    <li class=" current "> 
 
    <a href="/de/t/women/Dresses">Dresses</a> 
 
    </li> 
 
    <li class=" "> 
 
    <a href="/de/t/women/Shirts">Shirts</a> 
 
    </li> 
 
    <li class=" "> 
 
    <a href="/de/t/women/Blouses">Blouses</a> 
 
    </li> 
 
    <li class=" "> 
 
    <a href="/de/t/women/Accessories">Accessories</a> 
 
    </li> 
 
    <li class=" "> 
 
    <a href="/de/t/women/Coats">Coats</a> 
 
    </li> 
 
    <li class=" "> 
 
    <a href="/de/t/women/Pants">Pants</a> 
 
    </li> 
 
    <li>&nbsp;</li> 
 
    <li class="filter"> 
 
    <a data-open="modal-filter" href="#" aria-controls="modal-filter" aria-haspopup="true" tabindex="0">Filter</a> 
 
    </li> 
 
    <li> 
 
    <form action="/de/t/women/Dresses" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓"> 
 
     <input type="text" name="search[number]" id="search_number" placeholder="Artikelnummer"> 
 
     <button name="button" type="submit"> 
 
     <i class="fa fa-search"></i> 
 
     </button> 
 
    </form> 
 
    </li> 
 
</ul>