white-space::nowrap;
这条规则的含义是,单词在空白处不换行
<div id="menu">
<a href="#">Home</a>
<a href="#">Contact Us</a>
<a href="#">Web Dev</a>
<a href="#">Web Design</a>
<a href="#">Map</a>
</div>
接下来设置#menu容器。由于宽度自动水平适用,所以不用设置。代码如下:
#menu {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
下面对菜单项进行设置。代码如下:
#menu a,#menu a:visited {
display:block;
float:left;
color:#000;
text-decoration:none;
padding:5px;
margin:5px;
border-top:8px solid #9ab;
border-bottom:8px solid #9ab;
white-space:nowrap;
}
最后设置鼠标经过后的效果,代码如下:
#menu a:hover{
color:#F00;
border-bottom:solid 8px #000;
border-top:solid 8px #000;
}