多列屬性，每列有兩個列表項

我想實現2行8列總共2列表項每列。

但實際上，我得到了一個列3列表項 - 當碼字長度短例如，我想。前三個列表項目「新進」，「銷售」和「看起來」在同一列。

<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

如何管理以獲得最大的2列表項在一列？

來源

2016-09-29 StandardNerd

的的jsfiddle給我每個山坳 –

兩個列表當你仔細看的第一列包含3個列表項。 – StandardNerd

我明白了，是的。道歉，請看我的答案。 –

如果添加width: 100%;列出，這應該解決您的問題。請參見下面的演示：

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>

來源

2016-09-29 16:09:56

多列屬性，每列有兩個列表項

回答

相關問題