為什么li之間有間隙？
<div class="nav">
? ? <div class="logo"><img src="images/logo.jpg" /></div>
? ? ? ? <div class="nav_right">
? ? ? ? <ul>
? ? ? ? ? ? <li class="first"><a href="#">首頁</a></li>
? ? ? ? ? ? ? ? <li><a href="#">產(chǎn)品特色</a></li>
? ? ? ? ? ? ? ? <li><a href="#">解決方案</a></li>
? ? ? ? ? ? ? ? <li><a href="#">產(chǎn)品價格</a></li>
? ? ? ? ? ? ? ? <li><a href="#">幫助中心</a></li>
? ? ? ? ? ? ? ? <li><a href="#">關于我們</a></li>
? ? ? ? ? ? </ul>
? ? ? ? </div>
? ? </div>
css樣式如下
*{
margin:0;
padding:0;
}
.nav{
width:1000px;
height:80px;
margin:0 auto;
}
.logo{
float:left;
}
.nav_right{
width:720px;
float:left;
}
.nav_right li{
font-size:16px;
width:120px;
line-height:80px;
text-align:center;
list-style-type:none;
float:left;
}
.nav_right li a{
display:inline-block;
text-decoration:none;
}
.nav_right li a:link,.nav_right li a:visited{
color:#333;
}
.nav_right li a:hover,.nav_right li a:active{
padding:0 20px;
background-color:#C00;
}
.first{
background-color:#C00;
}
試著把ul跟li寫在一起，li之間還是有差不多8px的距離。也試著把ul的font-size設置為0但也是無濟于事！這是怎么回事?。?/p>
2017-03-13
沒有間距，你把a標簽定義為display:inline-block;沒有完全繼承l(wèi)i的寬，所以才會這樣。解決方法，方法一：把li定義為display:block;方法二：把hover樣式加在li上。
2017-03-15
方法一說錯了，應該是
把a定義為display:block;
你去查一下display：inline-block;與display:block;的區(qū)別就明白了