<div>移出父级而没有任何偏移/边距设置

Question

我想要这样的事情：

嵌套文件夹路径

所以，我复制并粘贴了Feeder chrome扩展程序中的一些代码，我看到它并将其与我自己混合以获得所需的东西：

＆＃13;

＆＃13;

.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*/
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

但是，在仔细通知后，您会发现我必须在position: relative规则中使用top和left / .folder-path .path-part抵消黑客攻击。没有它们，这就是它的样子：

＆＃13;

＆＃13;

.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*/
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

正如您所看到的，.path-part已经有所下降，我没有在其自身或其父级上放置任何上/下填充/边距/偏移属性。

注意.path-part div如何下降

我想知道为什么会这样。谢谢！

更新：所以，我知道这种情况正在发生，因为箭头相对定位。确实这是正确的。所以，我想知道是否有任何方法可以按照它们的方式定位箭头，而不会影响其他.path-part div。

Answer 1

奇数对齐是由于默认vertical-align: baseline。您似乎想要vertical-align: middle

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

＆＃13;

＆＃13;

.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));
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;