我希望有类似这样的东西:
正如您所看到的,
嵌套文件夹路径
所以,我从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。
div
元素。您可以通过将箭头设置为绝对定位来测试它,您会发现文本垂直对齐。 - Sahil