从父元素移出而没有设置任何偏移/边距

Question

我希望有类似这样的东西：

嵌套文件夹路径

所以，我从Feeder Chrome扩展中复制并粘贴了一些代码，并将其与我的代码混合使用，以获得所需的内容：

.folder-path {
    display: inline-block;
    height: 50px;
    width: 350px;
    border: 0.1px solid black;    
}

.folder-path .path-part {
    display: inline-block;
    height: 50px;
    line-height: 50px;
    margin-left: 10px;
    position: relative;/*HACK HERE*/
    top: -7px;
}

.folder-path .path-part + div {
    display: inline-block;
    height: 50px;
    width: 35px;
    display: inline-block;
    content: "";
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    width: 35px;
    height: 35px;
    border: 1px solid rgba(0,0,0,0.2);
    -webkit-mask-image: -webkit-gradient(linear, left top, right bottom, from(transparent), color-stop(0.5,transparent), color-stop(0.5, #000000), to(#000000));
    position: relative;
    left: -15px; /*to move slightly left*/
    top: 6px; /*to accommodate rotation*/
}

<div class="folder-path">
 <!--div.path-part+div-->
 <div class="path-part">Snippets</div>
    <div></div>
    
    <div class="path-part">d</div>
    <div></div>
</div>

然而，仔细观察你会发现我必须使用position: relative 和 top/left 偏移量的技巧在.folder-path .path-part规则中。没有它们，它看起来像这样:

.folder-path {
    display: inline-block;
    height: 50px;
    width: 350px;
    border: 0.1px solid black;    
}

.folder-path .path-part {
    display: inline-block;
    height: 50px;
    line-height: 50px;
    position: relative;
    margin-left: 10px;
}

.folder-path .path-part + div {
    display: inline-block;
    height: 50px;
    width: 35px;
    display: inline-block;
    content: "";
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    width: 35px;
    height: 35px;
    border: 1px solid rgba(0,0,0,0.2);
    -webkit-mask-image: -webkit-gradient(linear, left top, right bottom, from(transparent), color-stop(0.5,transparent), color-stop(0.5, #000000), to(#000000));
    position: relative;
    left: -15px; /*to move slightly left*/
    top: 6px; /*to accommodate rotation*/
}

<div class="folder-path">
 <!--div.path-part+div-->
 <div class="path-part">Snippets</div>
    <div></div>
    
    <div class="path-part">d</div>
    <div></div>
</div>

正如您所看到的，.path-part 稍微下降了一点，而我并没有在其本身或其父元素上设置任何上/下填充、边距或偏移属性。

注意 .path-part div 稍微下降了一点

我想知道为什么会发生这种情况。谢谢!

更新: 所以，我知道这是因为箭头是相对定位的。确实是正确的。所以，我想知道是否有方法可以将箭头定位在它们应该处于的位置，而不影响其他 .path-part divs。

- Gaurang Tandon

---

这是因为您拥有箭头，由于它是相对定位的，对箭头位置进行任何更改都会影响其他div元素。您可以通过将箭头设置为绝对定位来测试它，您会发现文本垂直对齐。 - Sahil

@Sahil 谢谢！请查看更新后的问题。 - Gaurang Tandon

Answer 1

奇怪的对齐是因为默认的 vertical-align: baseline。看起来你需要 vertical-align: middle。

.folder-path > div {
  display: inline-block;
  vertical-align: middle;
}

.folder-path {
  display: inline-block;
  height: 50px;
  width: 350px;
  border: 0.1px solid black;    
}
.folder-path .path-part {
  display: inline-block;
  vertical-align: middle;
  height: 50px;
  line-height: 50px;
  margin-left: 10px;
}
.folder-path .path-part + div {
  display: inline-block;
  vertical-align: middle;
  height: 50px;
  width: 35px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  width: 35px;
  height: 35px;
  border: 1px solid rgba(0,0,0,0.2);
  -webkit-mask-image: -webkit-gradient(linear, left top, right bottom, from(transparent), color-stop(0.5,transparent), color-stop(0.5, #000000), to(#000000));
}

<div class="folder-path">
  <!--div.path-part+div-->
  <div class="path-part">Snippets</div>
  <div></div>
  
  <div class="path-part">d</div>
  <div></div>
</div>

- Oriol

---

谢谢你的回答！ - Gaurang Tandon