代码之家 › 专栏 › 技术社区 › Ð Ð¾Ð¼Ð°Ð½ ÐÐ¾Ð¿ÑÐµÐ²

如何在伪元素前后像公共块一样对齐

css html

Ð Ð¾Ð¼Ð°Ð½ ÐÐ¾Ð¿ÑÐµÐ² · 技术社区 · 8 年前

我需要在伪元素中添加一些文本,但是像公共块一样对齐(在我的例子中是对齐的)。

例子:

.container {
  text-align: justify;
}

.container:after {
  content: "";
  display: inline-block;
  width: 100%;
}

.block {
  display: inline-block;
  font-size: 20px;
}

.block:not(:first-child):before {
  content: "Text2";
  display: inline-block;
}

<div class="container">
  <div class="block block1">Text1</div>
  <div class="block block3">Text3</div>
</div>

“text2”现在接近“text3”。我需要“text2”在中间。

3 回复 | 直到 8 年前

Temani Afif 8 年前

一个想法是使元素相对容器放置,并且您可以轻松地将其对齐:

.container {
  text-align: justify;
  position:relative;
}

.container:after {
  content: "";
  display: inline-block;
  width: 100%;
}

.block {
  display: inline-block;
  font-size: 20px;
}

.block:not(:first-child):before {
  content: "Text2";
  position:absolute;
  text-align:center;
  left:0;
  right:0;
}

<div class="container">
  <div class="block block1">Text1</div>

  <div class="block block3">Text3</div>
</div>

或者将其作为主容器的伪元素,并使用flexbox更改顺序并将其对齐:

.container {
  justify-content: space-between;
  display:flex;
}

.block3 {
  order:2;
}

.container:after {
  content: "Text2";
}

<div class=“container”>
<div class=“block block1”>文本1</div>

<div class=“block block3”>文本3</div>
</分区>

下面是使用float的另一个想法:

.container {
  text-align: center;
  font-size: 20px;
}

.block1 {
  float: left;
}

.block3 {
  float: right;
}

.container:before {
  content: "Text2";
  display: inline-block;
  font-size: 20px;
}

<div class=“container”>
<div class=“block block1”>文本1</div>

<div class=“block block3”>文本3</div>
</分区>

Jon Uleis 8 年前

text2“接近”text3,因为它在text3内部——这就是伪元素的工作方式。

你做了什么 .block:not(:first-child):before 基本相当于:

<div class="block block3">
  <div>Text2</div>
  Text3
</div>

使用flexbox和 order 这样的属性:

.container {
  display: flex;
  justify-content: space-between;
}

.block {
  font-size: 20px;
}

.container:after {
  content: "Text2";
  font-size: 20px;
}

.block3 {
  order: 1;
}

<div class="container">
  <div class="block block1">Text1</div>
  <div class="block block3">Text3</div>
</div>

Ilya Streltsyn 8 年前

如果您不需要对文本应用边框、背景等(因此您可以 display:inline 而不是 inline-block ),还可以执行以下操作:

.container {
  text-align: justify;
}

.container:after {
  content: "";
  display: inline-block;
  width: 100%;
}

.block {
  display: inline; /* not inline-block â so both real and generated text is aligned as one */
  font-size: 20px;
}

.block:not(:first-child):before {
  content: "Text2 "; /* white space is crucial, text-align:justify works by stretching it! */
}

<div class="container">
  <div class="block block1">Text1</div>
  <div class="block block3">Text3</div>
</div>

推荐文章

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

1 年前

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

1 年前

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

1 年前

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

1 年前

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

1 年前

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

1 年前

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

1 年前

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

1 年前

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

1 年前

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

1 年前