本文目錄導(dǎo)讀：

1. 使用CSS Flexbox布局
2. 使用CSS Grid布局

CSS控制導(dǎo)航欄排列的方法

在網(wǎng)頁(yè)設(shè)計(jì)中，CSS（層疊樣式表）是一種非常重要的技術(shù)，可以用來(lái)控制網(wǎng)頁(yè)的外觀和布局，讓導(dǎo)航欄排列成一排是CSS布局中常見(jiàn)的一個(gè)需求，下面是一些實(shí)現(xiàn)導(dǎo)航欄橫向排列的方法。

使用CSS Flexbox布局

Flexbox布局是CSS3中引入的一種布局方式，可以方便地實(shí)現(xiàn)元素的橫向排列，要利用Flexbox布局讓導(dǎo)航欄排列成一排，可以按照以下步驟進(jìn)行：

1、將導(dǎo)航欄元素設(shè)置為Flex容器：

.nav-bar {
  display: flex;
}

2、將導(dǎo)航欄元素添加進(jìn)去：

<div class="nav-bar">
  <a href="#">鏈接1</a>
  <a href="#">鏈接2</a>
  <a href="#">鏈接3</a>
</div>

3、設(shè)置Flex容器的子元素為Flex項(xiàng)目，并設(shè)置排列方式為橫向：

.nav-bar a {
  flex: 1;
}

這樣，導(dǎo)航欄元素就會(huì)按照橫向排列的方式顯示出來(lái)。

使用CSS Grid布局

CSS Grid布局是CSS3中引入的另一種布局方式，也可以用來(lái)實(shí)現(xiàn)元素的橫向排列，要利用Grid布局讓導(dǎo)航欄排列成一排，可以按照以下步驟進(jìn)行：

1、將導(dǎo)航欄元素設(shè)置為Grid容器：

.nav-bar {
  display: grid;
}

2、將導(dǎo)航欄元素添加進(jìn)去：

<div class="nav-bar">
  <a href="#">鏈接1</a>
  <a href="#">鏈接2</a>
  <a href="#">鏈接3</a>
</div>

3、設(shè)置Grid容器的子元素為Grid項(xiàng)目，并設(shè)置排列方式為橫向：

.nav-bar a {
  grid-column: 1;
}

這樣，導(dǎo)航欄元素就會(huì)按照橫向排列的方式顯示出來(lái)。

兩種方法都可以實(shí)現(xiàn)導(dǎo)航欄的橫向排列，具體使用哪種方法可以根據(jù)實(shí)際需求進(jìn)行選擇。