代码之家 › 专栏 › 技术社区 › treyBake user1850175

右对齐父级<span>内部<p>

css html

treyBake user1850175 · 技术社区 · 7 年前

我想将新行文本右对齐到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/

如何将span与p的最后一个字符右对齐?

4 回复 | 直到 7 年前

Paulie_D 7 年前

一个非位置的可能性,但同样,段落需要 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>

Temani Afif 7 年前

使用 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>

OliverRadini 7 年前

这应该能解决问题。span只能与容器的边缘对齐,而不是与文本行的结尾对齐,因此需要调整设置标记的方式:

.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>

Gobbin 7 年前

这是一个不需要 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>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

9 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

9 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

9 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

9 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

9 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

9 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

9 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

9 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

9 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

9 月前