我想要这样的事情:
嵌套文件夹路径
所以,我复制并粘贴了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>
&#13;
但是,在仔细通知后,您会发现我必须在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*/
}
&#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;
正如您所看到的,.path-part
已经有所下降,我没有在其自身或其父级上放置任何上/下填充/边距/偏移属性。
注意.path-part
div如何下降
我想知道为什么会这样。谢谢!
更新:所以,我知道这种情况正在发生,因为箭头相对定位。确实这是正确的。所以,我想知道是否有任何方法可以按照它们的方式定位箭头,而不会影响其他.path-part
div。
答案 0 :(得分:2)
奇数对齐是由于默认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));
}
&#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;