代码之家 › 专栏 › 技术社区 › Stijn Sanders

HTML/CSS:如何将文本左右对齐

css html

Stijn Sanders · 技术社区 · 14 年前

最好的代码是在一个段落中有两个文本位,一个左对齐,另一个右对齐,也就是说:

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

<table><tr><td></td><td align=right></td></tr></table> 会被排除在外。这不仅是一个庞大的代码相比,有两个适当的样式 <div> , <span> <p> 如果你知道HTML渲染引擎需要加载和计算什么才能在单元格中绘制文本,那么它也是一个野兽。。。

5 回复 | 直到 14 年前

JGreatorex 5 年前

尽可能少的标记量(您只需要一个范围):

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

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

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

Pekka 14 年前

唯一正确的方法是

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

div s(块级元素)并给它们一个 width .

一张桌子(或许多 分区 display: table / table-row / table-cell 属性)实际上是最安全的解决方案-即使您有很多困难的内容,也不可能中断。

Boldewyn 14 年前

我不会把它放在同一个地方 <p> ,因为这两个信息在语义上太不同了。如果必须的话,我建议:

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

user669677 user669677 11 年前

enter image description here

不同尺寸 他们一定是这就是解决方案:

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