多列属性，每列有两个列表项

我想实现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

多列属性，每列有两个列表项

回答

相关问题