橫排 CSS 詳解

橫排 CSS 是一種 CSS 技術，用于讓元素水平排列。經常用于制作導航欄、圖片墻等布局。本文將介紹使用橫排 CSS 的方法。

方法一：使用浮動

.nav {
overflow: hidden; /* 清除浮動 */
}
.nav li {
float: left; /* 浮動 */
margin-right: 10px; /* 可選項，設置間距 */
}

使用浮動可以讓元素水平排列。同時，您還需要在父元素上添加overflow: hidden;，清除浮動后的影響。

方法二：使用行內塊元素

.nav li {
display: inline-block; /* 行內塊元素 */
margin-right: 10px; /* 可選項，設置間距 */
}

使用行內塊元素可以使元素水平排列，而且不需要清除浮動。但是，需要注意的是，行內塊元素之間的空格會產生間距，需要通過設置父元素的font-size: 0;來解決。

方法三：使用 flex 布局

.nav {
display: flex; /* flex 布局 */
}
.nav li {
margin-right: 10px; /* 可選項，設置間距 */
}

使用 flex 布局可以讓元素更加靈活地排列。但是，需要注意的是，flex 布局需要在父元素上設置display: flex;，而且兼容性較差。

總結來說，以上三種方法都可以實現橫排 CSS，具體使用哪一種方法取決于您的需求和實際情況。