使用 CSS 实现水平导航菜单

使用 CSS 实现水平导航菜单

核心 CSS 样式

ul {
  float: left;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style-type: none;
}

a {
  float: left;
  width: 7em;
  text-decoration: none;
  color: white;
  background-color: purple;
  padding: 0.2em 0.6em;
  border-right: 1px solid white;
}

a:hover { background-color: #ff3300 }

li { display: inline; /* 显示为行内元素，前后没有换行 */ }

HTML 结构

<ul>
  <li><a href="#">Link one</a></li>
  <li><a href="#">Link two</a></li>
  <li><a href="#">Link three</a></li>
  <li><a href="#">Link four</a></li>
</ul>

实现原理

在上述示例中，我们将 ul 元素和 a 元素设置为左浮动（float: left）。li 元素显示为行内元素（inline），这样列表项会排列成一行。ul 元素的宽度设为 100%，列表中每个超链接的宽度为 7em（当前字体尺寸的 7 倍）。此外，添加了颜色和边框样式以增强视觉效果。