列表鏈接在左邊框和第一個列表項之間留下不需要的空間。爲什麼？

-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;   
}

來源

2013-05-01 dkjain

你確定它不僅僅是'ul'的左邊填充嗎？也許你想要這樣的http://jsfiddle.net/ZGvUN/1/ – 2013-05-01 16:17:53

謝謝。非常愚蠢的我完全忽略了填充UL。順便說一句，你是第一個提出解決方案的人，我怎麼可以評論你的評論。 – dkjain 2013-05-01 16:27:38

一個<UL>有一個默認的填充左的40像素

設置填充到0

.container ul{ 

padding-left:0; 

}

來源

2013-05-01 16:20:29

這是一個好主意，使用一組「重置」CSS樣式，消除這些常常導致跨瀏覽器問題的HTML元素的小怪癖。網上有足夠的資源。 – 2013-05-01 16:28:03

感謝，初學者重置CSS樣式的鏈接將有所幫助，而不是爲任何關注自稱的人提供鏈接Google – dkjain 2013-05-01 16:47:32

本章對初學者非常可靠：http://meyerweb.com/eric/tools/css /重啓/ – 2013-05-01 16:50:43

如果我你瞭解糾正你的問題，你可以只加：

ul { 
    padding-left: 0; 
}

你的CSS。

來源

2013-05-01 16:24:14 Pavel

列表鏈接在左邊框和第一個列表項之間留下不需要的空間。爲什麼？

回答

相關問題