奇怪的列表縮進

Question

我在html/css中做了一個簡單的菜單，並且在側面有一個奇怪的縮進，我似乎無法擺脫。

HTML：

<center><div id="menu"> 
<ul> 
    <li>Home</li> 
    <li>Videos</li> 
    <li>Info</li> 
</ul> 

CSS：

#menu ul { 
     background-color:#F60; 
     display:inline-block; 
     border-bottom:5px solid #98FF00; 
     list-style-type:none; 
    } 
    #menu ul li { 
     display:inline-block; 
     margin:2px 2px 0 2px; 
     padding:5px 5px 0 5px; 
     background-color:#98ff00; 
     transition:background-color 0.5s; 
     cursor:pointer; 
     color:#F60; 
    } 
    #menu ul li:hover { 
     background-color:#74C100; 
    } 

我已經包含了一個鏈接到我有問題的小提琴。

謝謝！

的jsfiddle：http://jsfiddle.net/GRA0007/4anrq8Lj/

Answer 1

你只需要添加padding-left: 0到ul。

這裏的fiddle

這樣做的原因是，瀏覽器對每個元素的一些默認樣式。對於ul元素，默認情況下會有一定量的填充剩餘（我認爲在Chrome上爲20px）。

網絡開發中這種事情的一種常見做法是用"reset"開始樣式表，即恢復所有的瀏覽器默認值。