.nav {
background-color: #F5F5DC;
}

.nav ul {
margin: 0;padding: 0;
list-style-type: none;
line-height: 3em;
}

.nav a {
display: block;
width: 10em;
text-align: center;
text-decoration: none;
background-color: #CCCCCC;
}

.nav a:hover {
background-color: #E6E6FA;
}

  • list-style-type:none - 删除圆点。导航栏不需要列表项标记。
  • 把外边距和内边距设置为 0 可以去除浏览器的默认设定。
  • display:block - 把链接显示为块元素可使整个链接区域可点击(不仅仅是文本),同时也允许我们规定宽度。
  • width:10em - 块元素默认占用全部可用宽度。此处自定义宽度。
  • display: inline-block - 使列表正常居中显示。
  • float:left - 使用 float 来把块元素滑向彼此。
  • display:block - 把链接显示为块元素可使整个链接区域可点击(不仅仅是文本),同时也允许我们规定宽度。
  • width:10em - 由于块元素默认占用全部可用宽度,链接无法滑动至彼此相邻。我们需要自定义宽度。
  •