CSS導(dǎo)航豎變橫

在CSS中，我們可以使用flex布局將導(dǎo)航欄從豎排變?yōu)闄M排，我們需要將導(dǎo)航欄的容器設(shè)置為flex容器，然后設(shè)置主軸為水平方向，即使用flex-direction: row;屬性，我們可以將導(dǎo)航欄的子元素設(shè)置為flex項，并使用flex: 1;屬性使其等寬排列。

以下是一個簡單的示例代碼：

HTML結(jié)構(gòu)：

<div class="navbar">
  <a href="#">鏈接1</a>
  <a href="#">鏈接2</a>
  <a href="#">鏈接3</a>
  <a href="#">鏈接4</a>
  <a href="#">鏈接5</a>
</div>

CSS樣式：

.navbar {
  display: flex;
  flex-direction: row;
}
.navbar a {
  flex: 1;
}

在這個示例中，我們將導(dǎo)航欄的容器設(shè)置為flex容器，并使用flex-direction: row;屬性將其主軸設(shè)置為水平方向，我們將每個鏈接元素設(shè)置為flex項，并使用flex: 1;屬性使其等寬排列，這樣，導(dǎo)航欄就會從豎排變?yōu)闄M排。