Question

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

Answer 1

<UL>默认填充左侧为40px

将填充设置为0

.container ul{

padding-left:0;

}

Answer 2

如果我理解你的问题，你可以添加：

ul {
   padding-left: 0;
}

到你的CSS。

列表链接在左边框和第一个列表项之间留下不需要的空间。为什么？

2 个答案: