在CSS中,可以通過設置columns
屬性,將li
元素排列成多列。
首先,需要定義ul
元素的columns
屬性,這樣li
元素就可以自動分列。
ul {
-webkit-columns: 2; /* Safari 和 Chrome */
-moz-columns: 2; /* Firefox */
columns: 2;
}
在上述代碼中,columns
屬性設置為2
,表示將li
元素分成兩列。同時,-webkit-columns
和-moz-columns
分別適用于Safari和Chrome以及Firefox瀏覽器。
有時候需要在多列中間添加一條分隔線。可以使用下面的CSS代碼來實現:
ul li {
display: inline-block;
margin-right: 10px;
border-right: 1px solid #ccc;
padding-right: 10px;
}
在上述代碼中,li
元素設置了display: inline-block;
屬性,使得它們在同一行內排列。同時,通過margin-right
屬性設置元素之間的間距;border-right
屬性設置元素之間的分隔線;padding-right
屬性設置分隔線與文本之間的距離。
如果需要取消分隔線,可以使用下面的代碼進行覆蓋:
ul li:last-child {
border-right: none;
padding-right: 0;
}
在上述代碼中,:last-child
選擇器選擇了最后一個li
元素,然后通過修改border-right
屬性和padding-right
屬性為none
和0
來取消分隔線。
上一篇css設置li居中對齊
下一篇css設置img的寬高比