多列属性，每列 2 个列表项

Question

我使用 CSS3 多列属性来设置无序列表的样式。

我想实现总共 2 行 8 列，每列 2 个列表项。

但实际上我在一列中得到 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

我怎样才能在一列中获得最多 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>

多列属性，每列 2 个列表项

Multi-Column Property with 2 list items per column

css

css-multicolumn-layout

多列 属性，每列 2 个列表项

Multi-Column Property with 2 list items per column

css

css-multicolumn-layout

多列属性，每列 2 个列表项