网站面包屑

Question

我正在网站上工作，想要添加边框半径的面包屑。我试图让它看起来像第二和第三个子z索引的面包屑一样。 我想要实现的是前一个列表中的第二个和第三个孩子。

JS小提琴http://jsfiddle.net/1cnh7bz7/1/

这是我的代码

.uk-breadcrumb > li {
  font-size: 1rem;
  vertical-align: top;
  border: 1px solid #000000;
  border-radius: 500px;
  padding: 0 15px;
  background: #ffffff;
  margin-left: -20px;
}

.uk-breadcrumb > li,
.uk-breadcrumb > li > a,
.uk-breadcrumb > li > span {
  display: inline-block;
  z-index: 1;
}
.uk-breadcrumb .uk-active {
  background: #eeeeee;
  border: 1px solid #eeeeee;
  z-index: 2;
}
<div class="bh-breadcrumbs">
<ul class="uk-breadcrumb uk-hidden-small">
    <li><a href="#">Home</a></li>
    <li><a href="#" title="Culture">Culture</a></li>
    <li class="uk-active"><span>arts</span></li>
</ul>  
</div>

任何帮助appriciated

Answer 1

我在z-index上使用了一点点黑客来使它工作。首先，你在没有使用位置值的情况下玩z-index，所以没有效果。请参阅.uk-breadcrumb > li + li行，其目标是另一个li旁边的元素li，并使用其中的多个来确定它是第一个，第二个还是第三个，然后应用正确的z-index。

我已经以10开始z-index，但可以从任何数字开始，但如果我们想要4个级别而不是3个级别，那么从高于需要开始会更容易添加级别。我相信社区可以找到一种更好的方法，通过nexting来做到这一点，但这会运作得很好......

＆＃13;

＆＃13;

.uk-breadcrumb > li {
  font-size: 1rem;
  vertical-align: top;
  border: 1px solid #000000;
  border-radius: 500px;
  padding: 0 15px;
  background: #ffffff;
  margin-left: -20px;
}
.uk-breadcrumb > li {
  z-index: 10;
}
.uk-breadcrumb > li + li {
  z-index: 9;
}
.uk-breadcrumb > li + li+ li {
  z-index: 8;
}
.uk-breadcrumb > li,
.uk-breadcrumb > li > a,
.uk-breadcrumb > li > span {
  display: inline-block;
  position: relative;
}
.uk-breadcrumb .uk-active {
  background: #eeeeee;
  border: 1px solid #eeeeee;
}

＆＃13;

<div class="bh-breadcrumbs">
  <ul class="uk-breadcrumb uk-hidden-small">
    <li><a href="#">Home</a>
    </li>
    <li><a href="#" title="Culture">Culture</a>
    </li>
    <li class="uk-active"><span>arts</span>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;