实例

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

尝试一下 »

实例解析：

• float:left - 使用浮动块元素的幻灯片彼此相邻
• display:block - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度
• width:60px - 块元素默认情况下是最大宽度。我们要指定一个60像素的宽度

**提示:**查看 完全样式的横向导航栏的示例。

水平导航条实例

创建一个水平导航条，在鼠标移动到选项后修改背景颜色。

实例

ul { list-style-type: none ; margin: 0 ; padding: 0 ; overflow: hidden ; background-color: #333 ; } li { float: left ; } li a { display: block ; color: white ; text-align: center ; padding: 14 px 16 px ; text-decoration: none ; } /* 鼠标移动到选项上修改背景颜色 */ li a :hover { background-color: #111 ; }

尝试一下 »

激活/当前导航条实例

在点击了选项后，我们可以添加 "active" 类来标准哪个选项被选中：

实例

.active { background-color: #4CAF50 ; }

尝试一下 »

链接右对齐

将导航条最右边的选项设置右对齐 (float:right;)：

实例

< ul > < li > < a href = " #home " > 主页 </ a > </ li > < li > < a href = " #news " > 新闻 </ a > </ li > < li > < a href = " #contact " > 联系 </ a > </ li > < li style = " float:right " > < a class = " active " href = " #about " > 关于 </ a > </ li > </ ul >

尝试一下 »

添加分割线

实例

/* 除了最后一个选项(last-child) 其他的都添加分割线 */ li { border-right: 1 px solid #bbb ; } li :last-child { border-right: none ; }

尝试一下 »

固定导航条

可以设置页面的导航条固定在头部或者底部：

固定在头部

ul { position: fixed ; top: 0 ; width: 100 % ; }

尝试一下 »

固定在底部

ul { position: fixed ; bottom: 0 ; width: 100 % ; }

尝试一下 »

注意: 该实例可以在移动设备上使用。

灰色水平导航条

灰色水平导航条

ul { border: 1 px solid #e7e7e7 ; background-color: #f3f3f3 ; } li a { color: #666 ; }

尝试一下 »

更多实例