样式以在包装时保持文本对齐

Question

.has-parent:not(.has-children):before {
    padding-right: 0.25em;
    content: "\0007C";
    font-size: large;
}

<div class="has-parent" style="padding-left: 1em;">
  Component 6
</div>

我的文字包含在下一行。当包裹到下一行时，我希望文本对齐而不是在跨度下移动。下图显示了我面临的问题。

在上图中，我希望6在C下对齐。我无法控制布局。我可以修改CSS以获得所需的效果。单元格的布局如下。

<div class="has-parent" style="padding-left: 1em;">
  Component 6
</div>

|你看到的是来自CSS：

.has-parent:not(.has-children):before {
    padding-right: 0.25em;
    content: "\0007C";
    font-size: large;
}

Answer 1

对position: absolute使用.has-parent:not(.has-children):before并使用边距和填充。

JSFiddle

.has-parent {
  padding: 0.1em 0 0 1.5em;
}

.has-parent:not(.has-children):before {
    content: "\0007C";
    font-size: large;
    position: absolute;
    margin: -0.1em 0 0 -0.5em;
}

<div class="has-parent">
  Component 6
</div>

Answer 2

您可以在父元素上使用<div class="has-parent" style="padding-left: 1em;"> Component <span>6</span> </div>。

display: flex

.has-parent {
  border: 1px solid black;
  width: 80px;
  display: flex;
}

.has-parent:not(.has-children):before {
  padding-right: 0.25em;
  content: "\0007C";
}

Answer 3

将float: left用于.has-parent:not(.has-children):before 应该做的工作

Answer 4

*.sql
*.gz
*.zip
*.log
!*.keep
!*.gitkeep
!*.dist
!*.dist.*

.has-parent:not(.has-children):before {
    padding-right: 0.25em;
    content: "\0007C";
    font-size: large;
}

span {
  width: 20px;
  text-align: left;
  display: inline-block;
}

@media screen and (max-width:142px){
  span {
    text-align: right;
  }
}

将@media查询更改为您需要的任何屏幕大小。