有两种创建水平导航栏的方法:使用行内或浮动列表项。
行内列表项
构建水平导航栏的一种方法是,将 <li> 元素指定为 inline:
li { display: inline; } display: inline; 默认情况下,<li> 元素是块元素。在这里,我们删除每个列表项之前和之后的换行符,这样它们才能显示在一行。
浮动列表项
创建水平导航栏的另一种方法是浮动 <li> 元素,并为导航链接规定布局:
注释:背景色被添加到链接以显示链接区域。整个链接区域都是可单击的,而不仅仅是文本。
注释:overflow:hidden 被添加到 ul 元素,以防止 li 元素超出列表。
提示:如需全宽的背景色,请将 background-color 添加到 <ul> 而不是每个 <a> 元素:
- float: left; - 使用 float 使块元素滑动为彼此相邻
- display: inline-block; - 将链接显示为块元素可以使整个链接区域都可单击(不仅是文本),而且允许我们指定填充(如果需要,还可以指定高度,宽度,边距等)
- padding ; - 使块元素更美观
- background-col