Html 如何在同一行中左对齐文本和右对齐文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12438339/
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 may I align text to the left and text to the right in the same line?
提问by Sababoni
How can I align text so that some of it aligns to the left and some of it aligns to the right within the same line?
如何对齐文本，以便在同一行内某些文本向左对齐，某些文本向右对齐？
<p>This text should be left-aligned. This text should be right aligned.</p>
I can align all of the text to the left (or to the right), either directly inline, or by using a stylesheet -
我可以将所有文本向左（或向右）对齐，可以直接内联，也可以使用样式表 -
<p style='text-align: left'>This text should be left-aligned.
This text should be right aligned.</p>
How can I align the corresponding text to the left and to the right, while keeping it on the same line?
如何将相应的文本左右对齐，同时保持在同一行上？
回答by Giona
<p style="text-align:left;">
This text is left aligned
<span style="float:right;">
This text is right aligned
</span>
</p>回答by Puyol
?HTML:
?HTML：
<span class="right">Right aligned</span><span class="left">Left aligned</span>?
css:
css：
.right{
float:right;
}
.left{
float:left;
}
回答by Hyman Miller
If you don't want to use floating elements and want to make sure that both blocks do not overlap, try:
如果您不想使用浮动元素并希望确保两个块不重叠，请尝试：
<p style="text-align: left; width:49%; display: inline-block;">LEFT</p>
<p style="text-align: right; width:50%; display: inline-block;">RIGHT</p>
回答by Osama Yawar Khawaja
HTML FILE:
HTML文件：
<div class='left'> Left Aligned </div>
<div class='right'> Right Aligned </div>
CSS FILE:
CSS文件：
.left
{
float: left;
}
.right
{
float: right;
}
and you are done ....
你完成了......
回答by Eric Soyke
While several of the solutions here will work, none handle overlap well and end up moving one item to below the other. If you are trying to layout data that will be dynamically bound you won't know until runtime that it looks bad.
虽然这里的几个解决方案都有效，但没有一个处理重叠得很好，最终将一个项目移动到另一个项目的下方。如果您尝试布局将动态绑定的数据，则直到运行时您才会知道它看起来很糟糕。
What I like to do is simply create a single row table and apply the right float on the second cell. No need to apply a left-align on the first, that happens by default. This handles overlap perfectly by word-wrapping.
我喜欢做的只是创建一个单行表并在第二个单元格上应用正确的浮点数。无需在第一个上应用左对齐，默认情况下会发生这种情况。这个句柄通过自动换行完美重叠。
HTML
HTML
<table style="width: 100%;">
<tr><td>Left aligned stuff</td>
<td class="alignRight">Right aligned stuff</td></tr>
</table>
CSS
CSS
.alignRight {
float: right;
}
回答by Web Designer cum Promoter
<h1> left <span> right </span></h1>
css:
css：
h1{text-align:left; width:400px; text-decoration:underline;}
span{float:right; text-decoration:underline;}
回答by Urvashi Gupta
Add span on each or group of words you want to align left or right. then add id or class on the span such as:
在要左对齐或右对齐的每个或一组单词上添加跨度。然后在跨度上添加 id 或 class，例如：
<h3>
<span id = "makeLeft"> Left Text</span>
<span id = "makeRight"> Right Text</span>
</h3>
CSS-
CSS-
#makeLeft{
float: left;
}
#makeRight{
float: right;
}
回答by Adrian Chrostowski
If you're using Bootstrap try this:
如果您正在使用 Bootstrap，请尝试以下操作：
<div class="row">
<div class="col" style="text-align:left">left align</div>
<div class="col" style="text-align:right">right align</div>
</div>
回答by bntrns
If you just want to change alignment of text just make a classes
如果您只想更改文本的对齐方式，只需创建一个类
.left {
text-align: left;
}
and span that class through the text
并通过文本跨越该类
<span class='left'>aligned left</span>
