多列属性，每列有 2 个列表项答案

【问题标题】：Multi-Column Property with 2 list items per column多列属性，每列有 2 个列表项
【发布时间】：2017-02-08 01:23:15
【问题描述】：

我使用 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 个列表项？

【问题讨论】：

JSfiddle 给我每列两个列表
当您仔细观察时，第一列包含 3 个列表项。
我明白了，是的。抱歉，请看我的回答。
无论您是使用我的解决方案还是 Sauced Apples 解决方案，尝试使用输入和按钮挤入表单时仍然会遇到问题，因为无论哪种方式都无法正常工作, ...因此，如果您可以向我们展示一些预期的最终结果，也许还有一张图纸，可能还有另一种方式。
evernote.com/shard/s372/sh/1936f3dd-d938-488e-a1cd-4c4bd76cc8f4/…

标签： css css-multicolumn-layout

【解决方案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>

【讨论】：