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

【问题标题】：HTML/CSS: how to put text both right and left aligned in a paragraphHTML/CSS：如何将文本在段落中左右对齐
【发布时间】：2010-10-27 11:49:30
【问题描述】：

在一个段落中包含两位文本的最佳代码是什么，一个左对齐，另一个右对齐，这也是：

尽可能少的代码
客户端最容易渲染（即使用最少的资源）

我添加了最后一个以确保 <table><tr><td></td><td align=right></td></tr></table> 会被排除在外。与几个正确样式的 <div>、<span> 或 <p> 相比，这不仅是一头野兽，如果您知道 HTML 渲染引擎必须加载和计算什么来决定甚至可以在其中绘制文本之前的单元格大小...

如果您不确定我的意思，这里有一个示例：页脚左对齐当前登录用户的名称，并且在同一行右对齐当前日期和时间和/或网站版本。

【问题讨论】：

与其关心用于渲染的几微秒，不如想出漂亮的、语义正确的标记来支持文本浏览器、屏幕阅读器和可能更好的搜索引擎评级？
不是，我认为这两者都很重要，所以左和右以相同的顺序出现在 HTML 代码中也会很好。

标签： html css

【解决方案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;}

【讨论】：

这很奇怪，一个并强制它进入 display:block，为什么不使用

？（嗨：en.wikipedia.org/wiki/Divi-divi）
因为这是语义化的。你想分割一个段落，所以我建议使用一个段落元素。您不能在段落中放置像 div 这样的块元素，因为那将是无效的。所以，<p><span></span></p> 是最好的标记。
实际上，现在我注意了，我发现您实际上并没有拆分段落！所以div 会更好！

【解决方案2】：

做到这一点的唯一正确方法是

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

但是，如果文本溢出，这会给您带来麻烦。如果可以，请使用divs（块级元素）并给它们一个固定的width。

一个表（或具有相应 display: table / table-row / table-cell 属性的多个 divs）实际上是最安全的解决方案 - 即使您有很多困难的内容，也不可能破坏。

【讨论】：

【解决方案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>

【讨论】：

没错。它们不是同一个段落。

【解决方案4】：

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

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

demo here

【讨论】：

我确实不想要，
LR
解决方案也允许我应用不同的字体大小。

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

【解决方案5】：

我以前用过这个：

html

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

CSS

.right {
    margin-left:100%;
}

Demonstration

【讨论】：

【解决方案6】：

好的，您可能想要的结果将通过以下结果提供给您：

在 CSS 中：

div { 列数：2； }
在 html 中：

div> 一些文字，bla bla bla /div>

在 CSS 中，您可以使用 div 将段落拆分为列，您可以将它们设置为 3、4...

如果你想有很多这样的不同段落，那么将 id 或 class 放在你的 div 中：

【讨论】：