CSS中有一個常用的樣式屬性叫做display,可以控制元素的展示方式。其中,display:inline-block可以讓多個元素水平排列,類似于序列效果。
.box { display: inline-block; margin-right: 20px; width: 100px; height: 100px; background-color: #ccc; }
上述代碼中,.box為需要水平排列的元素,設置了display:inline-block,使其可以像文本一樣在一行內顯示。同時,設置了margin-right屬性為20px,使每個元素之間保持一定的距離。接下來設置了元素的寬度和高度,并給它們添加了背景顏色。
在HTML中,可以將多個.box元素放在一個容器內,以實現水平排列的效果。
以上就是如何利用CSS實現水平排列的方法,通過display:inline-block屬性,我們可以讓多個元素在一行內顯示,方便布局和設計。
上一篇html+css試題
下一篇css延伸顏色