HTML/CSS：如何在段落中将文本同时右对齐和左对齐

Question

什么是将两个文本位于同一段落中，一个左对齐，一个右对齐，且还要满足以下条件的最佳代码：

• 尽可能少的代码
• 最容易呈现给客户端（即使用最少的资源）

我强调这些条件是为了确保排除<table><tr><td></td><td align=right></td></tr></table>。这不仅与几个经过适当样式化的<div>，<span>或<p>相比代码量巨大，而且在HTML渲染引擎决定单元格大小之前，必须加载和计算，甚至在绘制文本之前就已经完成了...

如果您不确定我的意思，请看这个例子：页面页脚，其中用户当前登录的名称左对齐，同时在同一行上右对齐当前日期、时间和/或网站版本。

最佳实践是利用灵活性更高的CSS来处理这种情况。下面是示例代码：

```html

左对齐文本 右对齐文本

```

注意，这里的样式使用内联CSS而不是外部CSS文件。此外，您可以使用其他标记，例如<div>和<span>，以达到同样的效果。

- Stijn Sanders

---

不如关注编写漂亮、语义正确的标记以支持文本浏览器、屏幕阅读器和可能更好的搜索引擎排名，而不是关注用于渲染的微秒数。 - oezi

不是代替，我认为两者都很重要，因此在HTML代码中左右出现的顺序相同也很好。 - Stijn Sanders

Answer 1

尽可能少的标记（只需要一个）：

<p>This text is left. <span>This text is right.</span></p>

如何实现左/右侧的样式取决于您，但我建议在ID或类上使用外部样式。

完整的HTML代码：

<p class="split-para">This text is left. <span>This text is right.</span></p>

对应的 CSS 代码:

.split-para      { display:block;margin:10px;}
.split-para span { display:block;float:right;width:50%;margin-left:10px;}

- Stephen

---

这很奇怪，为什么要使用<span>并将其强制显示为display:block，而不是使用<div><div>？（嘿嘿：http://en.wikipedia.org/wiki/Divi-divi） - Stijn Sanders

因为这是语义化的。你想要分隔一个段落，所以我建议使用段落元素。你不能在段落中放置像div这样的块级元素，因为那是无效的。所以，<p><span></span></p> 是最好的标记。 - Stephen

其实，现在我注意到你并没有真正地分割段落！所以使用 div 会更好！ - Stephen

Answer 2

唯一半正式的做法是：

<p>
  <span style="float: right">Text on the right</span>
  <span style="float: left">Text on the left</span>
</p> 

然而，如果文本溢出，这将会给你带来麻烦。如果可以的话，请使用 div（块级元素）并给它们一个固定的 width。

表格（或多个具有相应 display: table / table-row / table-cell 属性的 div）实际上是最安全的解决方案 - 即使您有很多复杂内容，也不可能出现断行。

- Pekka

Answer 3

我认为这两个信息在语义上有很大区别，因此不建议将它们放在同一个<p>标签中。如果非要这样做，建议按照以下方式处理：

<p style="text-align:right">
 <span style="float:left">I'll be on the left</span>
 I'll be on the right
</p>

- Boldewyn

---

没错，它们不是同一段落。 - user207421

Answer 4

我过去曾经使用过这个：

html

January<span class="right">2014</span>

CSS

.right {
    margin-left:100%;
}

演示

- Chips147

Answer 5

如果文本有不同的大小，并且它们必须被下划线，那么这就是解决方案：

<table>
  <tr>
    <td class='left'>January</td>
    <td class='right'>2014</td>
  </tr>
</table>

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;
}

在这里演示

- user669677

---

我特别不想要<table>，而且<p>L<span>R</span></p>的解决方案还允许我应用不同的字体大小。 - Stijn Sanders

@StijnSanders，你能用这个解决方案在同一基线上实现不同的字体大小吗？ - user669677

Answer 6

好的，你可能想要的结果是：

1. CSS中：

   div { column-count: 2; }

2. HTML中：

   <div> some text, bla bla bla </div>

在CSS中，你可以使用div将段落分成多列，你可以设置为3列、4列等。

如果你想要许多不同的段落，那么请在你的div中放置id或class：

- Jakub25