如何在

Question

我想在下面创建类别和两列数据。例如：

- category1
-- item1 item2
-- item3 item4
-- item5 item6
- category2
-- item1 item2
-- item3 item4

我的代码：

CSS

ul{
    width:210px;
}
li{
    float:left;
    margin:0 40px 40px 0;
}
li:nth-child(even){
    margin-right:0;
}

HTML

<div>
     <span>Category</span>
     <ul>
          <li>
               <span>Test</span>
               <input type="checkbox">
          </li>
     </ul>
</div>

我建议这个话题：How to display an unordered list in two columns?但不好，因为类别处于不利位置。任何解决方案？

Answer 1

使用curl属性可以达到类似效果......

flexbox

ul {
  display: flex;
  flex-wrap: wrap;
  width:210px;
}

li {
  flex: 1 1 50%;
}

Answer 2

您可以使用flexbox与flex-wrap:wrap;

一起使用* { box-sizing: border-box; font-family: Open Sans; } html, body { margin: 0; height: 100%; } .cat-list { list-style-type: none; padding: 1rem; } .cat-list li { margin-bottom: 0.5rem; font-size: 20px; flex: 1 0 50%; } .flex-list { display: flex; flex-wrap: wrap; } .cat-container { margin-bottom: 1rem; } .cat-header { margin: 0; border-bottom: 2px solid #999; padding: 1rem; }

＆＃13;

＆＃13;

<div class="cat-container">
  <h4 class="cat-header">Category 1</h4>
  <ul class="cat-list flex-list">
    <li>
      <span>Item 1</span>
      <input type="checkbox" />
    </li>
    <li>
      <span>Item 2</span>
      <input type="checkbox" />
    </li>
    <li>
      <span>Item 3</span>
      <input type="checkbox" />
    </li>
    <li>
      <span>Item 4</span>
      <input type="checkbox" />
    </li>
    <li>
      <span>Item 5</span>
      <input type="checkbox" />
    </li>
    <li>
      <span>Item 6</span>
      <input type="checkbox" />
    </li>
  </ul>
</div>
<div class="cat-container">
  <h4 class="cat-header">Category 2</h4>
  <ul class="cat-list flex-list">
    <li>
      <span>Item 1</span>
      <input type="checkbox" />
    </li>
    <li>
      <span>Item 2</span>
      <input type="checkbox" />
    </li>
    <li>
      <span>Item 3</span>
      <input type="checkbox" />
    </li>
    <li>
      <span>Item 4</span>
      <input type="checkbox" />
    </li>
  </ul>
</div>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;