代码之家 › 专栏 › 技术社区 › Danield

使用生成的内容在flex项目之间对齐内容

flexbox css html

Danield · 技术社区 · 7 年前

我有一些化妆品的内容,我想在弹性物品之间对齐,这些物品之间用空格对齐。

项目具有动态宽度。

下面演示的结果就是我想要的, 除了因为内容纯粹是装饰性的-我想使用 生成的内容 而不是实际的元素。

ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  list-style: none;
  padding: 0;
}
li:nth-child(odd) {
  background-color: lime;
  padding: 10px 20px
}
li:nth-child(even) {
  margin: 0 auto;
}

<ul class="wpr">
  <li>this is item 1</li>
  <li>X</li>
  <li>item 2</li>
  <li>X</li>
  <li>item 3 is considerably wider</li>
  <li>X</li>
  <li>item 4</li>
</ul>

Codepen demo (调整大小以查看效果)

我试图通过使用绝对定位来做到这一点,但我不知道是否有一种机制可以通过这种方式将内容集中在项目之间:

ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  list-style: none;
  padding: 0;
}
li {
  background-color: lime;
  padding: 10px 20px;
  position: relative;
}
li:after {
  content: 'X';
  position: absolute;
  right: -50%; /* this obviously won't produce the correct centering */
}

<ul class="wpr">
  <li>this is item 1</li>
  <li>item 2</li>
  <li>item 3 is considerably wider</li>
  <li>item 4</li>
</ul>

CSS是否可以使用生成的内容而不是实际的元素添加此内容?

3 回复 | 直到 7 年前

Temani Afif 7 年前

这是一个有一个小缺点的想法,因为我不得不在上一篇文章中省略这个项目 li :

ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  padding: 0;
}

li {
  display: flex;
  align-items:center;
  flex:1;
}

li span {
  background-color: lime;
  padding: 10px 20px;
  white-space:nowrap;
}

li:after {
  content: "X";
  flex: 1;
  text-align:center;
}
li:last-child {
 flex:initial;
}
li:last-child::after {
 content:none;
}

<ul class="wpr">
  <li><span>this is item 1</span></li>
  <li><span>item 2</span></li>
  <li><span>item 3 is considerably wider</span></li>
  <li><span>item 4</span></li>
</ul>

Michael Benjamin William Falcon 7 年前

通过绝对定位,您可以干净利落、高效地完成此任务:

ul {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
}

li {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 10px 20px;
  border: 1px dashed red;
  position: relative;
}

li + li::before {                /* #1 */
  content: "X";
  position: absolute;
  right: 100%;
  transform: translateX(50%);   /* #2 */
}

<ul class="wpr">
  <li>this is item 1</li>
  <li>item 2</li>
  <li>item 3 is considerably wider</li>
  <li>item 4</li>
</ul>

revised codepen

笔记:

这个 adjacent sibling combinator ( + )以紧跟在另一个元素之后的元素为目标。在这种情况下,伪元素将只应用于 li 紧随其后的元素 锂 . 这自然会排除 ::before 从一开始 锂 .
有关此定心方法工作原理的说明,请参阅以下帖子: Element will not stay centered, especially when re-sizing screen

MichaelB 7 年前

我可以建议的一个改进是更换

li:after {
  content: "X";
  flex: 1;
  text-align:center;
}
li:last-child {
 flex:initial;
}
li:last-child::after {
 content:none;
}

具有

li:not(:last-child)::after {
      content: "X";
      flex: 1;
      text-align:center;
    }