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

Question

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

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

我添加最后一个，以确保排除<table><tr><td></td><td align=right></td></tr></table>。与一些风格正确的<div>，<span>或<p>相比，它不仅是一个代码的野兽，如果您知道HTML渲染引擎必须加载什么，它也是一个野兽并计算在它们甚至可以在其中绘制文本之前决定单元格大小......

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

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

Answer 2

唯一正确的方法是

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

但是，如果文本溢出，这将使您遇到麻烦。如果可以，请使用div s（块级元素）并为其赋予固定的width。

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

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>

Answer 4

我过去曾用过这个：

HTML

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

的CSS

.right {
    margin-left:100%;
}

Demonstration

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

demo here

Answer 6

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

1. 在CSS中：

   div {       列数：2；     }

2. 在html中：

   << em> div>一些文本，bla bla bla << / em> / div>

在CSS中，使div将段落拆分为列，可以将其设为3、4 ...

如果您希望拥有许多这样的differend paragraf，请将id或class放入div中：