[英]Prevent list item padding from wrapping in a horizontal list
I am trying to make a horizontal unordered list <ul>
with four columns in each row. 我正在尝试创建一个水平无序列表
<ul>
,每行有四列。
The number of list items <li>
is dynamic and could change during runtime. 列表项
<li>
是动态的,可能会在运行时更改。
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? 有什么建议?
<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. 您可以使用break-inside属性执行此操作。
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 . 这是使用JS和Flexbox的方法的另一种替代方法。 First you group each 4
li
elements with wrapper
element and then you use flexbox to create 4 column layout. 首先,使用
wrapper
元素对每个4 li
元素进行分组,然后使用flexbox创建4列布局。
$('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 :- 你可以为
<li>
添加min-height
,它可以解决你的问题: -
ul li
{
margin: 20px ;
padding: 10px;
text-align: center;
color: white;
min-height:20px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.