CODEWITHSUNDEEP
css
Arte2
Arte2

Reputation: 333

Make the first <li> in a separate row, and rest <li> in two rows & columns

I have list that have two columns:

ul {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
  }

This will make all the

  • to be in two rows. I want the first
  • to be in a separate row at the top, and the rest in two columns below it like:

    A
B C
D E

    I have tried selectors such as;

     ul:first-child {
      display:inline-block;
  }

    But it does not work. How to do it?

    Upvotes: 0

    Views: 643

    • Answers (2)

    Saar Davidson
    Saar Davidson

    Reputation: 1382

    firstly you want to choose the first child of the list item and not the first list. then you can change the column-span property for the first list item like so:

    ul {
  -webkit-columns: 2;
  -moz-columns: 2;
  columns: 2;
}

li:first-child {
  column-span: all;
}
    <ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
</ul>

    unfortunately, you can't arrange the columns in a horizontal way in this way. if that's what you need you should use flexbox as the other answer suggested.

    Upvotes: 2

    Raeesh Alam
    Raeesh Alam

    Reputation: 3480

    You can achieve with help of display: flex property & first list should be 100% width like li:first-child { width: 100% }.

    I hope this snippet will help you.

    *{
    margin:0;
    padding:;
    box-sizing:border-box;
  }
  body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  }
  ul {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    list-style-type: none;
    padding: 0;
    margin: 0;
    width: 250px;
  }
  ul li{
    width: 50%;
    padding: 1px;
  }
  ul li:first-child {
    width: 100%;
    min-width: 100%;
  }
  ul li span{
    display: block;
    background-color: #ccc;
    padding: 4px 8px;
  }
    <ul>
  <li><span>A</span></li>
  <li><span>B</span></li>
  <li><span>C</span></li>
  <li><span>D</span></li>
  <li><span>E</span></li>
</ul>

    Upvotes: 2

    Related Questions