html - 创建顶级菜单项和右登录菜单

Question

创建顶部菜单项和登录文本右对齐的最佳方法是什么？

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/

Answer 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 以在您的 login_details div 中包含 line-height: 27px;:

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

jsFiddle example

由于您将登录详细信息框 float 到右侧，因此它需要位于列表之前才能位于同一行。