網站Breadcrumbs

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-索引。

我已經在10歲開始了z-index，但是可以在任意數量的時候開始，但是如果我們想要4個級別而不是3個，那麼從高於需要的位置開始可以更容易地添加一個級別。我相信社會可以找到一種更好的方式通過nexting，而不是做，但這會工作不夠好......

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

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