HTML / CSS：如何将文本在一个段落中左右对齐 [英] HTML/CSS: how to put text both right and left aligned in a paragraph

问题描述

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

• 尽可能少的代码


• 客户端最简单的呈现（即使用最少的资源）

b $ b

我添加最后一个，以确保< table>< tr>< td>< / td>< td align = right>< / td> ; / tr>< / table> 会被排除。不仅是一个适当样式的< div> ，< span> 或< p> ，它也是一个野兽，如果你知道什么是HTML渲染引擎加载和计算决定单元格大小，

如果你不确定我的意思，这里有一个例子：一个页脚，左对齐当前登录的用户名，

解决方案

可能的最低标记数量只需要一个span）：

 < p> < span>此文本正确。< / span>< / p> 
  

如何实现左/右样式取决于你，但我会推荐一个外部

 < p class =split-para>此文字左侧。 < span>此文本正确。< / span>< / p> 
  

和CSS：

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

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...

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.

解决方案

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.

The full HTML:

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

And the CSS:

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

这篇关于HTML / CSS：如何将文本在一个段落中左右对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！