有六个<li></li>如何让他们三个一行
时间: 2024-09-12 20:09:23 浏览: 39
HTML 列表中的dl,dt,dd,ul,li,ol区别及应用.doc
5星 · 资源好评率100%
如果你想要将六个`<li>`元素分为三行显示,你可以使用CSS的`display: inline-block`属性配合一些计算来实现。每个`<li>`设置为`inline-block`,然后设置它们之间的宽度,比如每行两个元素,间距可以根据需要调整。例如:
```html
<style>
li {
display: inline-block;
width: 50%; /* 或者你想设定的具体宽度 */
margin-right: 10px; /* 可以调整元素之间的间距 */
box-sizing: border-box;
}
li:last-child { /* 确保最后一行最后一个元素没有右边距 */
margin-right: 0;
}
</style>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
<li>列表项5</li>
<li>列表项6</li>
</ul>
```
这样,你应该能看到三个`<li>`元素在一行,每行之间有一定的间隔。
阅读全文