-2

为什么链接的内联块列表会在 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;        
}
4

2 回答 2

2

A<UL>的默认 padding-left 为 40px

将填充设置为 0

.container ul{

padding-left:0;

}
于 2013-05-01T16:20:29.347 回答
1

如果我理解正确您的问题，您可以添加：

ul {
   padding-left: 0;
}

到你的 CSS。

于 2013-05-01T16:24:14.507 回答