创建顶级菜单项和正确的登录菜单

创建顶级菜单项和登录文本对齐到右侧的最佳方式是什么？创建顶级菜单项和正确的登录菜单

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/

来源

2013-03-07 methuselah

将您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

由于您将登录详细信息框悬浮在右侧，它需要位于列表之前以便位于同一行。

来源

2013-03-07 21:25:26 j08691

使用CSS text-align财产，使olfloat: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-07 21:24:29

你#header容器具有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-07 21:29:10 user2019515

创建顶级菜单项和正确的登录菜单

回答

相关问题