在網頁設計中，常常需要將多個元素以水平方向排列。如何實現這一需求呢？
一種常用的方式是使用CSS的float屬性使元素浮動。但是有時候，這種方式可能會導致其它元素受到影響，因此我們可以使用CSS的display屬性的inline-block值來實現水平排列，而不會影響其它元素。具體的實現方式是將要排列的元素放在一個
標簽中，設置該
的display屬性為inline-block。下面是樣例代碼：
<style>
.horizontal {
display: inline-block;
width: 100px;
height: 100px;
background-color: #f00;
margin-right: 10px;
}
</style>
<div>
<div class="horizontal"></div>
<div class="horizontal"></div>
<div class="horizontal"></div>
</div>在樣例代碼中，我們設置每個要排列的元素都具有寬100px、高100px，紅色背景和右側10px的外邊距。接下來，我們將這些元素都放在一個
標簽中，并在該標簽上應用display:inline-block，這樣我們就實現了這些元素的水平排列。
除了使用inline-block，我們還可以使用CSS3的flexbox屬性來實現彈性布局。這種方式適用于更復雜的布局，但兼容性可能存在問題。
總之，在實現水平排列時，我們可以使用float屬性、inline-block屬性或flexbox屬性，選擇合適的方式來實現我們的需求。
上一篇css div 內容分列
下一篇css 頂部對齊