CSS实例：ULli打造CSS横向菜单蓝色地平线_DIV+CSS实例
教程Tag：暂无Tag,欢迎添加,赚取U币!
我们发现了一些问题，这些菜单的链接相距太远了。而且浏览器窗口有一定距离的空白，更重要的是宽度问题。我们今天就来解决这些问题制作“蓝色地平线”。
HTML代码与前面的一样，我们就不再重复了。我们看CSS代码。
首先是整体布局声明。利用通配符“*”表示在不非凡声明的情况下，默认所有元素的边距及填充均为零。
我们设置UL无序列表nav的背景色为#06c，向左浮动，宽度是100%。这两段代码定义以后，我们的菜单就能紧靠着浏览器窗口了，并且它的宽度是100%。
菜单的列表项li定义为display:inline;内联（行内）将li限制在一行来显示及设置列表项预设标记为无；
我们接着往下看链接区域的代码意义，link、visited状态：
链接元素向左浮动，填充上下为5px、左右为12px。
文字颜色为白色，去除链接下划线。背景色#06c与上面的相同。
我们定义了右边框线：1px、实线、白色#fff。这一句很重要，它明确的划分了菜单链接之间的距离。这一句话是缩下的形式。
完整的写应该是：（关于更多缩写代码知识请参考MB5U.com的其它文章）
我们的这个菜单的编码工作完成了，看最终的效果：
代码调试框 [www.mb5u.com]
HTML代码与前面的一样，我们就不再重复了。我们看CSS代码。
示例代码 [www.mb5u.com]
* {
margin:0;
padding:0;
}
#nav {
background:#06c;
float:left;
width:100%;
}
#nav li {
display: inline;
list-style-type: none;
}
#nav li a:link,#nav li a:visited {
float:left;
padding:5px 12px;
color:#fff;
text-decoration: none;
background:#06c;
border-right: 1px solid #fff;
}
#nav li a:hover {
background:#060;
}
margin:0;
padding:0;
}
#nav {
background:#06c;
float:left;
width:100%;
}
#nav li {
display: inline;
list-style-type: none;
}
#nav li a:link,#nav li a:visited {
float:left;
padding:5px 12px;
color:#fff;
text-decoration: none;
background:#06c;
border-right: 1px solid #fff;
}
#nav li a:hover {
background:#060;
}
首先是整体布局声明。利用通配符“*”表示在不非凡声明的情况下，默认所有元素的边距及填充均为零。
我们设置UL无序列表nav的背景色为#06c，向左浮动，宽度是100%。这两段代码定义以后，我们的菜单就能紧靠着浏览器窗口了，并且它的宽度是100%。
菜单的列表项li定义为display:inline;内联（行内）将li限制在一行来显示及设置列表项预设标记为无；
我们接着往下看链接区域的代码意义，link、visited状态：
链接元素向左浮动，填充上下为5px、左右为12px。
文字颜色为白色，去除链接下划线。背景色#06c与上面的相同。
我们定义了右边框线：1px、实线、白色#fff。这一句很重要，它明确的划分了菜单链接之间的距离。这一句话是缩下的形式。
完整的写应该是：（关于更多缩写代码知识请参考MB5U.com的其它文章）
示例代码 [www.mb5u.com]
border-right-width:1px;
border-right-style:solid;
border-right-color:#fff;
border-right-style:solid;
border-right-color:#fff;
我们的这个菜单的编码工作完成了，看最终的效果：
代码调试框 [www.mb5u.com]相关DIV+CSS实例：
- 相关链接：
- 教程说明：
DIV+CSS实例-CSS实例：ULli打造CSS横向菜单蓝色地平线
。