0

トップ メニュー アイテムとログイン テキストを右揃えにするにはどうすればよいですか?

CSS

body {
    margin: 0px;
}
#header {
    height: 25px;
    width: 100%;
    background-color: rgb(34, 34, 34);
    color: #fff;
    font-family:'segoe ui', arial, helvetica, sans-serif;
    font-size: 13px;
    padding: 10px;
}
#header ol {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
}
#header li {
    position: relative;
    display: -moz-inline-box;
    display: inline-block;
    line-height: 27px;
    padding: 0;
    vertical-align: top;
    margin-right: 10px;
}
#login_details {
    float: right;
    display: inline-block;
}

HTML 

<div id="header">

<ol>
    <li>Page 1</li>
    <li>Page 2</li>
    <li>Page 3</li>
    <li>Page 4</li>
</ol>

<div id="login_details">
dd
</div>

</div>

現時点ではこれを実行しようとしていますが、login_detailsのテキストが右に正しく配置されていません。

http://jsfiddle.net/KqqyY/

4

3 に答える 3

1

コンテナ#headerのwithは100％であり、その後、パディングを追加して100％より大きくなるようにすると、次のように解決できます。box-sizing:border-box

#header {
    height:45px; /* The original 25px plus the paddings from the top and bottom */
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

このJSFiddleを参照してください：http：//jsfiddle.net/KqqyY/2/

于 2013-03-07T21:29:10.180 に答える
1

CSStext-alignプロパティを使用して、ol float:left. さらにいくつかのものを追加しました：

#login_details {
    float: right;
    display: inline-block;
    text-align: right;
}

#header ol {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
    float: left;
}

#header {
    height: 25px;
    // Get rid of the 100% width to make it fit on screen
    background-color: rgb(34, 34, 34);
    color: #fff;
    font-family:'segoe ui', arial, helvetica, sans-serif;
    font-size: 13px;
    padding: 10px;
}
于 2013-03-07T21:24:29.337 に答える
1

login_detailsリストの前に div を配置します。

<div id="header">
    <div id="login_details">dd</div>
    <ol>
        <li>Page 1</li>
        <li>Page 2</li>
        <li>Page 3</li>
        <li>Page 4</li>
    </ol>
</div>

CSS を変更line-height: 27px;して、login_details div に を含めます。

#login_details {
    float: right;
    display: inline-block;
    line-height: 27px;
}

jsFiddle の例

ログインの詳細ボックスを右側に移動したため、同じ行に配置するには、リストの前に配置する必要があります。

于 2013-03-07T21:25:26.560 に答える