Multi-Column Property with 2 list items per column

Question

I use CSS3 multi-column properties to style an unordered list.

I want to achieve 2 rows and 8 columns in total with 2 list items per column.

But actually I get 3 list items in one column - i suppose when the word-length is short eg. first three list items "New In", "Sale" and "Looks" are in the same column.

<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>

And 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

How can I manage to get a maximum of 2 list items in one column?

Answer 1

If you add width: 100%; to list, that should solve your issue. See the demo below:

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>