w3school 在线教程

  CSS 基础教程CSS 中级教程CSS3 高级教程CSS 响应式设计CSS 网格教程CSS 实例CSS 测验CSS 参考手册

  建站手册关于 W3School帮助 W3School

  CSS 水平导航栏

  水平导航栏

  有两种创建水平导航栏的方法：使用行内或浮动列表项。

  行内列表项

  构建水平导航栏的一种方法是，除了上一章中的“标准”代码外导航条css，还要将 元素指定为 inline：

  实例

  <pre class="cssHigh">
li {
display: inline;
}
</pre>

  亲自试一试

  例子解释：

  display: inline; -默认情况下， 元素是块元素。在这里，我们删除每个列表项之前和之后的换行符，这样它们才能显示在一行。

  浮动列表项

  创建水平导航栏的另一种方法是浮动 元素，并为导航链接规定布局：

  实例

  <pre class="cssHigh">
li {
float: left;
}
a {
display: block;
padding: 8px;
background-color: #dddddd;
}
</pre>

  亲自试一试

  例子解释：

  提示：如需全宽的背景色导航条css，请将 background-color 添加到

  CSS 参考手册CSS 实例CSS 测验CSS 课外书

  W3School 简体中文版提供的内容仅用于培训和测试，不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。版权所有，保留一切权利。