我有一个元素列表,它是动态从数据库中获取的,所以我对内容一无所知。我必须在一行中以相同的高度显示这四个里。我尝试了以下代码,但它不起作用。
我尝试将 display:flex
设置为 ul
但所有 li 标签都显示在一行中。我也尝试了 display: table
和 display: table-cell;
但同样的问题都显示在一行中。
body {
margin: 0;
padding: 0;
}
.List {
max-width: 1140px;
margin: auto;
}
.List ul {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.List ul li {
width: 24%;
padding: 20px;
box-shadow: 1px 1px 12px 0px #EBE8E8;
border-radius: 03px;
background-color: #fff;
margin: auto 07px 14px auto;
display: inline-block;
}
<div class="List">
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo sociis natoque
</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean </li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque
</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo sociis natoque
</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean </li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo sociis natoque
</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque
</li>
</ul>
</div>
My expected output is
1 2 3 4
5 6
最佳答案
试试这个:
body {
margin: 0;
padding: 0;
}
.List {
max-width: 1140px;
margin: auto;
}
.List ul {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.List ul li {
padding: 20px;
box-shadow: 1px 1px 12px 0px #EBE8E8;
border-radius: 03px;
background-color: #fff;
margin: 0 10px;
flex: 1 0 19%;
max-width: 19%;
}
关于html - 如何在一行中等高显示四个li标签?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56802036/