HTML/CSS：如何将文本在段落中左右对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4032850/
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
HTML/CSS: how to put text both right and left aligned in a paragraph
提问by Stijn Sanders
What would be the best code to have two bits of text in a single paragraph, one left aligned, the other right aligned, that also is:
在单个段落中包含两位文本的最佳代码是什么，一个左对齐，另一个右对齐，这也是：
- the least code as possible
- the easiest for clients to render (i.e. using least resources)
- 尽可能少的代码
- 客户端最容易渲染（即使用最少的资源）
I add this last one to be sure <table><tr><td></td><td align=right></td></tr></table>would get ruled out. Not only is this a beast of code compared to a couple of properly styled <div>, <span>or <p>'s, it's also a beast if you know what a HTML render engine has to load and calculate to decide on the cell sizes before it even get's to painting text in them...
我添加最后一个以确保<table><tr><td></td><td align=right></td></tr></table>会被排除在外。与几个正确样式的<div>, <span>or <p>s相比，这不仅是代码的野兽，如果您知道 HTML 渲染引擎必须加载和计算以决定单元格大小，甚至在绘制文本之前它也是野兽在他们之中...
If you're not sure what I mean, here's an example: a page footer with left aligned the name of the user currently logged on, and on the same line right aligned the current date and time and/or website version.
如果您不确定我的意思，这里有一个例子：页面页脚左对齐当前登录的用户的名称，在同一行右对齐当前日期和时间和/或网站版本。
回答by Stephen
Least amount of markup possible (you only need one span):
尽可能少的标记（您只需要一个跨度）：
<p>This text is left. <span>This text is right.</span></p>
How you want to achieve the left/right styles is up to you, but I would recommend an external style on an ID or a class.
您希望如何实现左/右样式取决于您，但我建议在 ID 或类上使用外部样式。
The full HTML:
完整的 HTML：
<p class="split-para">This text is left. <span>This text is right.</span></p>
And the CSS:
和 CSS：
.split-para { display:block;margin:10px;}
.split-para span { display:block;float:right;width:50%;margin-left:10px;}
回答by Pekka
The only half-way proper way to do this is
做到这一点的唯一中途正确方法是
<p>
<span style="float: right">Text on the right</span>
<span style="float: left">Text on the left</span>
</p>
however, this will get you into trouble if the text overflows. If you can, use divs (block level elements) and give them a fixed width.
但是，如果文本溢出，这会给您带来麻烦。如果可以，请使用divs（块级元素）并给它们一个固定的width.
A table (or a number of divs with the according display: table / table-row / table-cellproperties) would in fact be the safest solution for this - it will be impossible to break, even if you have lots of difficult content.
一张表（或一些div具有相应display: table / table-row / table-cell属性的s ）实际上是最安全的解决方案 - 即使您有很多困难的内容，它也不会被破坏。
回答by Boldewyn
I wouldn't put it in the same <p>, since IMHO the two infos are semantically too different. If you must, I'd suggest this:
我不会把它放在同一个<p>，因为恕我直言，这两个信息在语义上太不同了。如果必须的话，我建议这样做：
<p style="text-align:right">
<span style="float:left">I'll be on the left</span>
I'll be on the right
</p>
回答by Boldewyn
If the texts has different sizesand they must be underlinedthis is the solution:
如果文本有不同的大小，并且它们必须加下划线，这是解决方案：
<table>
<tr>
<td class='left'>January</td>
<td class='right'>2014</td>
</tr>
</table>
css:
css：
table{
width: 100%;
border-bottom: 2px solid black;
/*this is the size of the small text's baseline over part (≈25px*3/4)*/
line-height: 19.5px;
}
table td{
vertical-align: baseline;
}
.left{
font-family: Arial;
font-size: 40px;
text-align: left;
}
.right{
font-size: 25px;
text-align: right;
}
回答by Chips147
I have used this in the past:
我过去使用过这个：
html
html
January<span class="right">2014</span>
Css
css
.right {
margin-left:100%;
}
回答by Jakub25
Ok what you probably want will be provide to you by result of:
好的，您可能想要的结果将通过以下结果提供给您：
in CSS:
div { column-count: 2; }
in html:
<div> some text, bla bla bla </div>
在 CSS 中：
div { 列数：2; }
在 html 中：
< div> 一些文字，bla bla bla </div>
In CSS you make div to split your paragraph on to column, you can make them 3, 4...
在 CSS 中，您可以使用 div 将段落拆分为列，您可以将它们设置为 3、4...
If you want to have many differend paragraf like that, then put id or class in your div:
如果你想有很多这样的不同段落，那么把 id 或 class 放在你的 div 中：
