Question

我正在建立一个由不同大小的列表组成的网站。有些人有7个子弹点，其他人有近20个。我正在尝试创建一个css类，一旦我在第6个“li”达到5个子弹点，它就会创建一个新列。

到目前为止我有类似的东西，但问题是我需要定义列数。我怎样才能让它自己开始一个新专栏呢？它也必须是一个响应！

谢谢

下面的代码和jsfiddle

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
</ul>



ul {
    -moz-column-count: 4;
    -moz-column-gap: 20px;
    -webkit-column-count: 4;
    -webkit-column-gap: 20px;
    column-count: 4;
    column-gap: 20px;
}

JsFiddle在这里 - http://jsfiddle.net/pdExf/467/

Answer 1

如果您为ul提供column-width而不是column-count，那么它的行为就像您想要的那样。同时设置高度，使其不能超过6行。

ul {
  -moz-column-width: 7em;
  -moz-column-fill: auto;
  -moz-column-gap: 20px;
  -webkit-column-width: 7em;
  -webkit-column-fill: auto;
  -webkit-column-gap: 20px;
  column-width: 7em;
  column-gap: 20px;
  column-fill: auto;
  line-height:1.2;
  height: 6em;
  
}

<div class="listcontainer">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
    <li>Item 10</li>
    <li>Item 11</li>
    <li>Item 12</li>
    <li>Item 13</li>
    <li>Item 14</li>
    <li>Item 15</li>
    <li>Item 16</li>
    <li>Item 17</li>
    <li>Item 18</li>
    <li>Item 19</li>
    <li>Item 20</li>
    <li>Item 21</li>
    <li>Item 22</li>
    <li>Item 23</li>
  </ul>
</div>

Answer 2

也许flexbox提供了一个解决方案（有点类似于Lister先生的解决方案，它还需要一个等于5 li高度的固定高度。）

Codepen Demo

ul {
  list-style-type: none;
  width: 100%;
  background: #c0ffee;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 6em;
  margin-bottom: 1em;
}
li {
  margin-right: 20px;
  height: 1.2em;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
  <li>Item 10</li>
  <li>Item 11</li>
  <li>Item 12</li>
  <li>Item 13</li>
  <li>Item 14</li>
  <li>Item 15</li>
  <li>Item 16</li>
  <li>Item 17</li>
  <li>Item 18</li>
  <li>Item 19</li>
  <li>Item 20</li>
  <li>Item 21</li>
  <li>Item 22</li>
  <li>Item 23</li>
</ul>

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
</ul>

响应列表创建新列

2 个答案: