html导航条制作横向css

### 使用CSS创建HTML页面中的横向导航条

为了实现一个简单的横向导航栏，可以采用无序列表`<ul>`来构建基本结构，并通过CSS设置样式使各个列表项水平排列。

#### HTML部分

<nav>
  <ul class="nav-bar">
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

#### CSS部分

.nav-bar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden; /* 清除浮动 */
}

.nav-bar li {
  float: left; /* 让列表项左浮动以达到横排效果 */ 
}

.nav-bar a {
  display: block;
  width: auto;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

上述代码定义了一个名为`.nav-bar`的类用于控制整个导航菜单的整体外观[^1]。对于每一个链接元素，则设置了内联块显示模式以及一些间距属性以便更好地呈现视觉效果[^2]。