컬럼 당 2 개의리스트 아이템을 가진 Multi-Column 프로퍼티

Question

정렬되지 않은리스트를 스타일링하기 위해 CSS3 다중 컬럼 프로퍼티를 사용합니다.

열당 2 개의 목록 항목으로 총 2 행 8 열을 얻고 싶습니다.

하지만 실제로 한 열에 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

어떻게 하나 개의 컬럼에서이 목록 항목의 최대를 얻기 위해 관리 할 수 ​​있습니까?

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>