HTML/CSS:如何将文本左右对齐在段落中
HTML/CSS:如何将文本左右对齐在段落中
提问于 2010-10-27 11:49:30
在一个段落中有两段文字，一个左对齐，另一个右对齐，最好的代码是：
- 尽可能少的代码
- 客户最容易呈现的(即使用最少的资源)
我添加最后一个是为了确保<table><tr><td></td><td align=right></td></tr></table>被排除在外。这不仅是代码的猛兽，与几个正确的<div>、<span>或<p>的样式相比，如果您知道HTML引擎需要加载和计算哪些单元格大小才能在它们中绘制文本的话，它也是一个猛兽。
如果您不确定我的意思，下面是一个例子:页面页脚左对齐当前登录的用户名称，并在同一行上右对齐当前日期和时间以及/或网站版本。
回答 6
Stack Overflow用户
回答已采纳
发布于 2010-10-27 11:55:20
尽可能少的标记(只需要一个跨度)：
<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;}Stack Overflow用户
发布于 2010-10-27 11:53:22
唯一正确的方法是
<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属性的display: table / table-row / table-cell)实际上是最安全的解决方案--即使您有很多困难的内容，也是不可能打破的。
Stack Overflow用户
发布于 2010-10-27 11:53:43
我不会把它放在同一个<p>中，因为IMHO这两个信息在语义上太不一样了。如果你必须的话，我建议如下：
<p style="text-align:right">
<span style="float:left">I'll be on the left</span>
I'll be on the right
</p>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4032850
复制相关文章
相似问题
腾讯云开发者
