How to make category with two columns under

Question

I want to create categories and two columns data under. Example:

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

My code:

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>

I suggested this topic: How to display an unordered list in two columns? , but not good, because categories are in a bad position. Any solution?

can you please post the proper html with the layout issue and also the expected result as an image. The HTML provided has nothing much. — Naren Murali, Aug 27 '17 at 12:10

score 2 · Accepted Answer · answered Aug 27 '17 at 11:58

You could achieve a similar effect using flexbox properties...

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

li {
  flex: 1 1 50%;
}

<div>
  <span>Category</span>
  <ul>
    <li>
      <span>Test</span>
      <input type="checkbox">
    </li>
    <li>
      <span>Test 2</span>
      <input type="checkbox">
    </li>
    <li>
      <span>Test 3</span>
      <input type="checkbox">
    </li>
    <li>
      <span>Test 4</span>
      <input type="checkbox">
    </li>
    <li>
      <span>Test 5</span>
      <input type="checkbox">
    </li>
    <li>
      <span>Test 6</span>
      <input type="checkbox">
    </li>
  </ul>
</div>

score 1 · Answer 2 · answered Aug 27 '17 at 11:58

You can do it using flexbox with 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;
}

<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>

How to make category with two columns under

2 Answers2