同一行上左对齐和右对齐文本

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 200 美元的免费额度!

有时需要在同一行上将某些文本左对齐,而将某些文本右对齐。 例如,在页脚中,您可能希望将版权信息放在左侧,将网站管理员信息放在右侧。 以下是您可能希望使用的 HTML 代码

<div id="textbox">
  <p class="alignleft">Text on the left.</p>
  <p class="alignright">Text on the right.</p>
</div>

如果您随后分别将 CSS 类 alignleft 和 alignright 的值设置为 text-align: left; 和 text-align: right;,您将接近所需的结果,但由于新段落,您的右对齐文本将向下移一行。 相反,只需将您的段落浮动即可

.alignleft {
	float: left;
}
.alignright {
	float: right;
}

然后只需记住清除浮动

<div style="clear: both;"></div>

leftandright.png

查看演示