导航栏自适应问题

 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;

}