使用 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>
  Link three
  Link four