指导 4 - 水平列表 - 步骤综合

有许多方法可以做成水平列表。最主要的用法是为“LI”元素使用"display: inline"。

CSS 代码
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #036;
}

#navcontainer ul li a:hover
{
color: #fff;
background-color: #369;
}


HTML 代码
<div id="navcontainer">
<ul>
<li><a href="#">Milk</a></li>
<li><a href="#">Eggs</a></li>
<li><a href="#">Cheese</a></li>
<li><a href="#">Vegetables</a></li>
<li><a href="#">Fruit</a></li>
</ul>
</div>

步骤 1 - 制作一个基本列表

用一个无序列表开始。列表项都是可以点击的（都包含<a href="#"> </a>）。但是这并不是必需的。举个例子，“#”用来指向一个虚拟链接。

步骤 2 - 删掉列表项符号

设置"list-style-type"属性的值为"none"可以删掉HTML中的列表项符号。

#navcontainer ul { list-style-type: none; }

步骤 3 - 删掉内边距和外边距属性

标准HTML列表带有一定的左缩进。各个浏览器对此的缩进幅度也不尽相同。有的浏览器(Mozilla, Netscape, Safari)使用内边距设定所进的比例，而有的浏览器(Internet Explorer, Opera)却使用外边距。

为了删掉浏览器惯有的左缩进，我们设置列表的"UL"标签的内边距和外边距属性值均设为"0"。

#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}

步骤 4 - 行内显示

为“LI”标签使用"display: inline;"可以使列表行内显示。

CSS 代码
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}

#navcontainer ul li { display: inline; }

步骤 5 - 删除文本修饰

您可能希望去掉文本的下划线。因为导航栏的位置和其他反馈机制能够很明显地被看作一组链接，所以我们经常要将导航栏中的链接文本中的下划线去掉。当然，您也应该注意修改标准超链接的行为会使可能无法意识到这些列表项是链接的用户感到困惑。

#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}

#navcontainer ul li { display: inline; }
#navcontainer ul li a { text-decoration: none; }

步骤 6 - 位列表项添加内边距

为了使每一个列表项能够分块显示，我们需要为“a”元素设置内边距。

#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1em;
}

步骤 7 - 添加背景色

为列表项使用背景颜色和边框。我们可以使用许多种边框和背景色的组合。

#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #036;
}

步骤 8 - 添加滚动颜色

使用“a:hover”来设置二级背景色，作为滚动效果所使用的颜色。如果您现在用鼠标在列表上滚动，您将会看到滚动效果。

#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #036;
}

#navcontainer ul li a:hover
{
color: #fff;
background-color: #369;
}

步骤 9 - 使列表居中

为使列表居中显示，需要为“UL”标签设置"text-align: center;"。

#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #036;
}

#navcontainer ul li a:hover
{
color: #fff;
background-color: #369;
}

完成！

« 返回主目录

其他的Max Design 文章和演讲
相关链接 webstandardsgroup.org