Многоколоночное свойство с двумя элементами списка на столбец

Question

Я использую свойства CSS с несколькими столбцами для создания неупорядоченного списка.

Я хочу получить 2 строки и 8 столбцов в общей сложности с двумя элементами списка на столбе.

Но на самом деле я получаю 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 элементов списка в одном столбце?

Answer 1

Если вы добавите 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>