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元素添加额外的填充。莫齐拉是臭名昭着的。

检查元素以检查填充。

例如，

这将从chrome中删除默认填充。

-webkit-padding-start:0px;

绝对定位元素之间的垂直对齐

1 个答案: