Question

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

我希望总共获得2行8列，每列有2个列表项。

但实际上我在一列中得到3个列表项 - 我想当单词长度很短时，例如。前三个列表项“New In”，“Sale”和“Looks”在同一列中。

rightGroup.setLayout(new FillLayout());

和CSS：

//A simple function to get the value stored in cookie;
var getCookie = name =>
  document.cookie.split(';')
  .map(token => token.trim('').split('='))
  .reduce((prev, curr) =>
    (prev[curr[0]] = curr[1]) && prev, {})[name],
  myPopup = () => {
    if (!getCookie('noPopUp')) {
      console.log('your popup logic');
      document.cookie = 'noPopUp=true'
    }
  },
  reset = () => {
    document.cookie = 'noPopUp=true; expires=' + new Date();
  };

reset(); //Remove this and myPopUp will do nothing until you restart your browser.
myPopUp();
myPopUp();

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个列表项

1 个答案: