絕對定位元素之間的垂直對齊

Question

我想對齊兩個相對於容器元素絕對定位的元素，並且我不明白爲什麼當應用相同的頂部值時，其中一個元素（ul）會變成一點點下來。你可以看到它住here

我有以下HTML：

<div id="header"> 
    <div class="inner"> 
     <span id="logo_description"> Description comes here </span> 
     <ul id="user_menu"> 
      <strong>name</strong> | 
      <a href="#"> Account </a> | 
      Language 
      <select> 
       <option> Option1 </option> 
       <option> Option2 </option> 
      </select>     
     </ul> 
    </div> 
</div> 

下面CSS：

#header { 
    float: left; 
    margin-bottom: 15px; 
    padding: 8px 0 13px; 
    width: 100%; 
    height: 51px; 
} 

#header .inner { 
    margin: 0 auto; 
    position: relative; 
    width: 1000px; 
} 

#header .inner #logo_description { 
    position:absolute; 
    top:20px; 
} 

#header #user_menu { 
    display: inline; 
    font-size: 12px; 
    position: absolute; 
    right: 10px; 
    top: 20px; 
    text-align: right; 
}​ 

Answer 1

有可能是您的瀏覽器添加微胖到ul元素。 mozilla是這個臭名昭着的。

檢查元素以檢查填充。例如，這將從chrome中刪除默認填充。

-webkit-padding-start:0px;