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> 

但是,如果文本溢出,这将使您遇到麻烦.如果可以的话,使用divs(块级元素)并给它们一个固定的width.

事实上,一张桌子(或许多div具有相应display: table / table-row / table-cell属性的s )实际上是最安全的解决方案 - 即使你有很多困难的内容,它也是不可能的.

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>