在带有块元素的 div 中，如何使用 css 在右侧对齐文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/692692/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I align text on the right using css when in a div with block elements
提问by Steve Weet
I wish to produce the following layout within a header div on my page, using CSS only
我希望在我的页面上的标题 div 中生成以下布局，仅使用 CSS
+-----------+ + + + Image + Title text Some text aligned on the right + + +-----------+
I am having trouble aligning the text on the right. It keeps aligning immediately to the right and one line below the title text, like this
我无法对齐右侧的文本。它会立即与标题文本的右侧和一行对齐，如下所示
+-----------+ + + + Image + Title text + + Some text aligned on the right +-----------+
This is my current markup.
这是我目前的标记。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
#header, #footer { padding: 0.3em 0; border-bottom: 1px solid; }
#header img { display: inline;}
#header h1 { display: inline; margin: 0px; padding: 0px;
vertical-align: 50%; position: left;}
#login-status { margin: 0px; padding: 0px;
display: inline;text-align: right; position: right;}
</style>
<title>Models</title>
</head>
<body>
<div id="header">
<img alt="Logo" height="110" width="276"
src="http://www.google.co.uk/intl/en_uk/images/logo.gif" width="276" />
<h1>Models</h1>
<p id="login-status">You are currently logged in as steve</p>
</div> <!-- end of header -->
</body>
</html>
I had expected the inline styling to not cause a line break after the h1 element but this is not the case. Can anyone suggest what I am doing wrong?
我原以为内联样式不会在 h1 元素之后导致换行，但事实并非如此。谁能建议我做错了什么？
回答by Justin Lucente
#header, #footer { padding: 0.3em 0; border-bottom: 1px solid; overflow: hidden; zoom: 1; }
#header img { float: left;}
#header h1 { float: left; margin: 0px; padding: 0px; }
#login-status { margin: 0px; padding: 0px; float: right; }
There's no need for extra divs around the elements or a clearing div when floating. I use the above technique regularly to do exactly what you're trying to do. overflow:hidden; makes the header clear the floats, but if there is no width specified you will need zoom: 1; for IE6. zoom doesn't validate, but it works flawlessly, and you can add it to an ie6 only css file if need be.
元素周围不需要额外的 div，也不需要在浮动时清除 div。我经常使用上述技术来做你想做的事情。溢出：隐藏；使标题清除浮动，但如果没有指定宽度，您将需要 zoom: 1; 对于 IE6。zoom 不会验证，但它可以完美运行，如果需要，您可以将它添加到仅 ie6 的 css 文件中。
回答by Bryan Sebastian
You will most likely have to do something like this...
你很可能不得不做这样的事情......
<head>
<style type="text/css">
#header, #footer
{
padding: 0.3em 0;
border-bottom: 1px solid;
}
#login-status
{
margin: 0px;
padding: 0px;
line-height: 110px;
vertical-align: middle;
}
</style>
<title>Models</title>
</head>
<body>
<div id="header">
<div style="float: left">
<img alt="Logo" src="http://www.google.co.uk/intl/en_uk/images/logo.gif" style="width: 276px;
height: 110px" />
</div>
<div style="float: left; margin: 0px 8px 0px 8px;
line-height: 110px; vertical-align: middle;">
<h1>Models</h1>
</div>
<div id="login-status" style="float: right;">
You are currently logged in as steve
</div>
<div style="clear: both">
</div>
</div>
<!-- end of header -->
</body>
The "Clear" will be needed somewhere in order to clear your floating, but it could be applied to another div tag that would follow your header instead of being included in the header.
某处将需要“清除”以清除您的浮动，但它可以应用于另一个 div 标签，该标签将跟随您的标题而不是包含在标题中。
Note... I changed this up a bit to get the text areas that are to the right of the image to be vertically aligned "middle". You can change the styling to be css based, but this should acheive what you were looking for.
注意...我改变了一点，以使图像右侧的文本区域垂直对齐“中间”。您可以将样式更改为基于 css，但这应该可以达到您的要求。
回答by Jakub Arnold
img float: left; title text float: left; some text float: right;
回答by Albert
Use "float:right;"
使用“浮动：右；”
回答by Steve Weet
I played around with this a little more as the css using zoom and non-sized floats both failed validation. I also did not like the login status being shown vertically centred.
由于使用缩放和非大小浮点数的 css 均未通过验证，因此我对此进行了更多研究。我也不喜欢垂直居中显示的登录状态。
The final solution that I have arrived at (with much cribbing from Bryan) is as follows :-
我得出的最终解决方案（来自 Bryan 的大量抄袭）如下：-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<style type="text/css">
#header,
#footer { padding: 0.3em 0; border-bottom: 1px solid;
height: 110px; }
#header img { margin: 0px; padding: 0px; display: inline; }
#header h1 { line-height: 110px; vertical-align: middle;
display: inline; position: absolute; left: 300px;
margin: 0px; }
#login_status { font-size: 14px; margin: 0px; position: absolute;
top: 100px; right: 10px; display: inline;
text-align: right; }
</style>
<title>Models</title>
</head>
<body>
<div id="header">
<img alt="Logo" height="110"
src="http://www.google.co.uk/intl/en_uk/images/logo.gif" width="276" />
<h1>Models</h1>
<span id="login_status">You are currently logged in as stevew</span>
</div> <!-- end of header -->
</body>
</html>
