CSS中,<li>
元素的排列方式有很多種,其中比較常見的是讓<li>
元素成行排列。
實現<li>
元素成行排列有兩種方式:
一、使用display: inline-block;
ul { list-style-type: none; } li { display: inline-block; }
上面的代碼中,將<li>
元素的display屬性設置為inline-block
,這樣就可以使<li>
元素成為一行內的塊元素排列。
二、使用float: left;
ul { list-style-type: none; overflow: hidden; } li { float: left; }
上面的代碼中,將<li>
元素的float屬性設置為left
,這樣就可以使<li>
元素成為在同一行內浮動的塊元素排列。
需要注意的是,為了防止<ul>
元素的高度塌陷,需要給其添加overflow: hidden;
屬性。
總結來說,讓<li>
元素成行排列,可以通過設置display: inline-block;
或float: left;
來實現,需要根據實際情況選擇合適的方式。