Prevent list item padding from wrapping in a horizontal list

Question

I am trying to make a horizontal unordered list <ul> with four columns in each row.
The number of list items <li> is dynamic and could change during runtime.

Current Code and result

ul {
  -webkit-columns: 4; /* Chrome, Safari, Opera */
  -moz-columns: 4; /* Firefox */
  columns: 4;
  display: block;
}

ul li {
  margin: 20px ;
  padding: 10px;
  text-align: center;
  color: white;
  display: list-item;
} 

which gives me this:

The list is not really horizontal since the second element (Green) is under the first one (Blue) and next to it, but the order doesn't matter in my case.

The problem is that the padding of the element is wrapping to the next column.

Any suggestions?

JSfiddle: here

Answer 1

Try below code Demo

<ul id = "list">
 <li style="background-color: rgb(51, 70, 115);">1</li>
 <li style="background-color: rgb(156, 78, 129);">2</li>
 <li style="background-color: rgb(121, 159, 59);">3</li>
 <li style="background-color: rgb(51, 70, 115);">4</li>    
 <li style="background-color: rgb(51, 70, 115);">5</li>
 <li style="background-color: rgb(121, 159, 59);">6</li>
 <li style="background-color: rgb(156, 78, 129);">7</li>
 <li style="background-color: rgb(156, 78, 129);">8</li>
</ul>

 #list {
    -webkit-column-count: 4;
       -moz-column-count: 4;
            column-count: 4; /*3 is just placeholder -- can be anything*/
}
#list li {
    display: inline-block;
    margin-bottom: 20px;  
        padding:10px 80px;
}

Answer 2

Here is other alternative to your approach using JS and Flexbox. First you group each 4 li elements with wrapper element and then you use flexbox to create 4 column layout.

$('ul').each(function(){
    var divs = $('li', this);
    console.log(divs)
    console.log(divs.slice(0,4));
    for(var i = 0; i < divs.length; i+=4) {
        console.log(i)
        divs.slice(i, i+4).wrapAll('<li class="wrapper"><ul></ul></li>');
    }
});

ul {
  padding: 0;
  margin: 0;
}
   
.wrapper ul {
  display: flex;
  flex-direction: row;
}

.wrapper ul li  {
  flex: 1;
  margin: 10px;
  padding: 10px;
  color: white;
  min-height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li style="background-color: rgb(51, 70, 115);">1</li>
  <li style="background-color: rgb(121, 159, 59);">2</li>
  <li style="background-color: rgb(133, 50, 104);">3</li>
  <li style="background-color: rgb(75, 93, 135);">4</li>
  <li style="background-color: rgb(151, 187, 93);">5</li>
  <li style="background-color: rgb(156, 78, 129);">6</li>
  <li style="background-color: rgb(75, 93, 135);">4</li>
  <li style="background-color: rgb(151, 187, 93);">5</li>
  <li style="background-color: rgb(156, 78, 129);">6</li>
  <li style="background-color: rgb(51, 70, 115);">1</li>
  <li style="background-color: rgb(121, 159, 59);">2</li>
  <li style="background-color: rgb(133, 50, 104);">3</li>
  <li style="background-color: rgb(75, 93, 135);">4</li>
  <li style="background-color: rgb(151, 187, 93);">5</li>
  <li style="background-color: rgb(156, 78, 129);">6</li>
  <li style="background-color: rgb(75, 93, 135);">4</li>
</ul>

Answer 3

You can do this with the break-inside property.

    ul {
     -webkit-columns: 4;
     /* Chrome, Safari, Opera */
     -moz-columns: 4;
     /* Firefox */
     columns: 4;
     display: block;
     list-style: none;
      

   }
   
  ul li {
     margin: 20px;
     padding: 10px;
     text-align: center;
     color: white;
     min-height: 50px;
     display: list-element;
     -webkit-column-break-inside:avoid; 
     -moz-column-break-inside:avoid; 
     -o-column-break-inside:avoid; 
     -ms-column-break-inside:avoid; 
      column-break-inside:avoid;
   }

<ul>
  <li style="background-color: rgb(51, 70, 115);">1</li>
  <li style="background-color: rgb(121, 159, 59);">2</li>
  <li style="background-color: rgb(133, 50, 104);">3</li>
  <li style="background-color: rgb(75, 93, 135);">4</li>
  <li style="background-color: rgb(151, 187, 93);">5</li>
  <li style="background-color: rgb(156, 78, 129);">6</li>
</ul>

Answer 4

You can add min-height to that <li> , it may solved your problem :-

ul li
{
      margin: 20px ;
      padding: 10px;
      text-align: center;
      color: white;
      min-height:20px;
}