html - CSS 滑动门不工作

Question

这可能是一个愚蠢的问题，但无法通过谷歌找到答案。图像的左侧显示正常，我这辈子无法显示正确的图像。

HTML/CSS 新手，刚学基础。

http://bungle.ca/http://bungle.ca/images/

<ul id="nav">
   <li><a href="#">Link One</a></li>
   <li><a href="#">Link Two</a></li>
   <li><a href="#">Link Three</a></li>
   <li><a href="#">Link Four</a></li>
   <li><a href="#">Link Five</a></li>
   <li><a href="#">Link Six</a></li>
</ul>

#nav{
min-width:  1024px;
height: 30px;
padding:    0px;
margin: 0px;
color:  #eeeeee;
white-space:    nowrap;
list-style-type:    none;
}

#nav li{
display:    inline;
background: url('../images/tabRight.png') no-repeat right   top;
}

#nav li a{
padding:    .2em    1em;
height: 30px;
width:  100px;
text-decoration:    none;
float:  left;
text-align: center;
background: url('../images/tabLeft.png')    no-repeat   left    top;
}

Answer 1

只需将 display:inline-block; 添加到 #nav li