1

コンテナー要素に対して絶対配置されている 2 つの要素を整列させようとしていますが、同じ上部の値を適用すると、要素の 1 つ (ul) が少し下に移動する理由がわかりません。ここで生で見れます

私は次の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;
}​

</p>

4

1 に答える 1

1

ブラウザがul要素に余分なパディングを追加している可能性があります。mozillaはこれで悪名高いです。

要素を調べて、パディングを確認します。

これにより、たとえばChromeからデフォルトのパディングが削除されます。

-webkit-padding-start:0px;
于 2012-12-08T09:07:20.337 に答える