CSS 垂直导航栏

gtxyzz web技术 2022-07-08 781浏览 0

CSS 垂直导航栏

垂直导航栏

________________________________

如需构建垂直导航栏，除了上一章中的代码外，还可以在列表中设置 <a> 元素的样式：

实例

li a {
  display: block;
  width: 60px;
}

例子解释：

display: block; - 将链接显示为块元素可以使整个链接区域都可以被单击（而不仅仅是文本），我们还可以指定宽度（如果需要，还可以指定内边距、外边距、高度等）。

width: 60px; - 默认情况下，块元素会占用全部可用宽度。我们需要指定 60 像素的宽度。

您还可以设置 <ul> 的宽度，并删除 <a> 的宽度，因为当显示为块元素时，它们将占据可用的全部宽度。这将导致与我们之前的例子相同的结果：

实例

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 60px;
} 
li a {
  display: block;
}

背景色被添加到链接以显示链接区域。

请注意，整个链接区域都是可单击的，而不仅仅是文本。