创建*菜单项和正确的登录菜单
问题描述:
创建*菜单项和登录文本对齐到右侧的最佳方式是什么?创建*菜单项和正确的登录菜单
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的文本没有正确对齐的权利。
答
将您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;
}
由于您将登录详细信息框悬浮在右侧,它需要位于列表之前以便位于同一行。
答
使用CSS text-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;
}
答
你#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/