Question

我想将换行符右对齐到p的右侧。

这是我当前代码的简化版本：

p {
  text-align: center
}

span {
  text-align: right
}

<p>
  lorem ipsum lorem ipsum lorem ipsum
  <br />
  <span>-author</span>
</p>

但是我的跨度仍然居中。如果我使用float: right，它会在右边，但是它与p标签的最后一个字符不是内联的。设置max-width并不理想，因为lorem ipsum可以是任意长度。

这是一个jsfiddle当前：https://jsfiddle.net/dxgs3u41/

如何将跨度与p的最后一个字符右对齐？

Answer 1

这应该可以解决问题。跨度只能与容器的边缘对齐，而不能与文本行的末尾对齐，因此您需要调整设置标记的方式：

.center {
  text-align: center;
}

p {
  display: inline-block;
  position: relative;
  text-align: center
}

span {
  position: absolute;
  right: 0;
}

<div class="center">
  <p>
    lorem ipsum lorem ipsum lorem ipsum
    <br />
    <span>-author</span>
  </p>
</div>

Answer 2

使用inline-block元素，使容器的宽度成为内容的宽度，您可以将整个容器居中，然后将其中的文本居中。

div {
  text-align: center
}
div > p {
  display:inline-block;
  text-align: right
}

<div>
  <p>lorem ipsum lorem ipsum lorem ipsum
  <br>
  <span>-author</span>
  </p>
</div>

<div>
  <p>lorem ipsum lorem ipsum
  <br>
  <span>-author</span>
  </p>
</div>

Answer 3

无位置的可能性，但该段落必须为inline而不是display:block。

body {
  text-align: center;
}

p {
  display: inline-flex;
  flex-direction: column;
  text-align: center;
  border: 1px solid red;
}

span {
  text-align: right;
}

  <p>
    lorem ipsum lorem ipsum lorem ipsum
    <br />
    <span>-author</span>
  </p>

Answer 4

这是不需要flexbox的解决方案。我个人不喜欢flexbox（主要是因为我认为它非常复杂），所以这取决于您！

div {
  display: block;
  text-align: center;
}
p {
  text-align: center;
  display: inline-block;
}

span {
  display: block;
  text-align: right
}

<div>
<p>
    lorem ipsum lorem ipsum lorem ipsum lorem ipsum
    <br />
    <span>-author</span>
</p>
</div>

在父<p>内右对齐<span>

4 个答案: