Question

我问这个是因为我需要1行文本，这些文本在同一行上留下对齐文本和右对齐文本而不在其上方或下方创建空白区域。例如：

Left aligned                                                      right aligned

上面和下面没有换行符。我在此问题上遇到的唯一解决方案包括创建换行符的<p>标记或<div>标记。

Answer 1

如果我理解正确，你需要在同一条线上但在两侧的两段文字。为此，您可以使用CSS float属性：

JsFiddle：https://jsfiddle.net/Lpvt2frL/

.container {
  border: 1px solid red;
  height: 100px;
  width: 450px;
}
.container div {
  position: inline-block;
}
.left-span {
  float: left;
}
.right-span {
  float: right;
}

<section class='container'>
  <div class='left-span'>Left text on a line...</div>
  <div class='right-span'>...right text on the same line!</div>
</section>

Answer 2

您可以在父元素（通常是容器）上使用display:flex和justify-content: space-between来实现此目的。

.parent-container {
  display: flex;
  justify-content: space-between;
  padding: 2px;
  background-color: #eee;

<div class="parent-container">
  <span>left-aligned</span>
  <span>right-aligned</span>
</div>

Answer 3

对齐和浮动元素并不完全相同，但这将呈现您正在寻找的基本行为：

<p style="float: left;">Left aligned</p>
<p style="float: right;">right aligned</p>

Answer 4

使用display: inline-block：

＆＃13;

#left,
#right {
  display: inline-block;
  width: 50%;
}
#left {
  text-align: left;
}
#right {
  text-align: right;
}

＆＃13;

<div style="width:400px;border:1px solid black">
  <div id="left">Align left</div><!--
  --><div id="right">Align right</div>
</div>

＆＃13;

这也避免了之后必须清除漂浮物。

是否有一些标签提供<p>的功能而不添加换行符？

4 个答案: