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;
}
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
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;
}
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>
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>
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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.