为什么链接的内联块列表会在 div 的左边框和列表中的第一项之间留下不需要的空间。查看我创建的jsFiddle 。
代码:HTML
<body>
<!--Header area containing logo and contact info-->
<div id="header">
<div class="container">
<div id="logo"></div>
<div id="right_header_info">
<div id="links">
<a href="#">Login</a>
<a href="#">Register</a>
<a href="#">Register</a>
<a href="#">Register</a>
</div>
<div id="search">
<form action="search.php" method="post">
<input type="search" name="search" id="search_field"/>
<input type="submit" name="submit" value="" id="search_btn" />
</form>
</div>
</div>
</div>
</div>
<!--Top Menu-->
<div id="top_menu">
<div class="container">
<ul>
<li><a href="#">New Arrivals</a></li>
<li><a href="#">Link1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</div>
</div>
<!--Content Area-->
<div id="content">
<div class="container">CONTENT AREA</div>
</div>
<!--Footer-->
<div id="footer">
<div class="container">FOOTER STUFF</div>
</div>
代码:CSS
.container {
margin:0 auto;
width:980px;
text-align:left;
border:1px solid white;
}
#top_menu {
background:url(img/top_menu_bar_bg.png) repeat-x;
}
#top_menu ul{
list-style-type:none;
}
#top_menu ul li{
display:inline-block;
}
#top_menu ul > li > a
{
font-size: 13px;
color: #ffffff;
line-height: 14px;
text-decoration: none;
padding-top: 11px;
padding-right: 18px;
padding-bottom: 11px;
padding-left: 18px;
margin-bottom: 5px;
z-index: 6;
position: relative;
font-weight: bold;
}
#top_menu .container > ul > li:hover > a
{
background-color: #000;
background-image: none;
background-repeat: repeat;
background-attachment: scroll;
background-position: 0% 0%;
}
#content{
background-color:#3300CC;
}
#footer {
background-color:#C60;
}