新的列表項目遮蔽先前的項目因爲切緣陰性

我的工作，我實現列表的一步指標：新的列表項目遮蔽先前的項目因爲切緣陰性

<ol> 
    <li>Step 1</li> 
    <li class="active">Step 2</li> 
    <li>Step 3</li> 
</ol>

每個列表元素有一個圓形的邊緣這是正確的，以便顯示進度，所以我有以下的CSS：

li{ 
    display: block; background-color: white; width: 33%; border: 1px solid #ddd; text-indent: 40px; 
    float: left; 
    margin: 0 0 0 -20px; 
    border-radius: 0 15px 15px 0; 
}

我的問題是後面的元素是陰影前面，因此圓形邊緣被隱藏。我試圖爲每個元素設置一個遞減的z-index，但它不起作用（除了我無法使用這個解決方案）。我通過改變float:right acheive期望的表達，而且呈現遞減的順序列表項...

檢查這個的jsfiddle的詳細信息：http://jsfiddle.net/fMRbr/

來源

2012-01-04 Jørgen

你爲什麼不使用'浮動：right'和公正更改標記中的步驟順序？ http://jsfiddle.net/fMRbr/1/ – 2012-01-04 15:11:01

@ZoltanToth：如果任何不瞭解CSS的東西都會看到它，那就沒有任何意義了。不要做那樣的事情;內容應該是有用的，即使沒有造型。 – You 2012-01-04 15:16:25

我可以做到這一點，但我認爲這會有點尷尬。我希望有更好的方式來實現這一點，更好的語義。 – 2012-01-04 15:17:22

可以使用:before

li{ 
 
    display: inline-block; 
 
    width: 33%; 
 
    margin: 0 0 0 -20px; 
 
    border: 1px solid #ddd; 
 
    border-radius: 0 15px 15px 0; 
 
    background-color: white; 
 
    text-indent: 40px; 
 
    
 
    position: relative; 
 
} 
 

 
li.active{ 
 
background-color: red; 
 
} 
 

 
li:before{ 
 
    content: ''; 
 
    width: 15px; 
 
    height: 19px; 
 
    display: inline-block; 
 
    background: #fff; 
 
    border: 1px solid #ddd; 
 
    border-width: 0 1px 1px 0; 
 
    border-radius: 0 15px 15px 0; 
 
    position: absolute; 
 
    top: 0; 
 
    left: -3px; 
 
} 
 

 
li.afteractive:before { 
 
    content: ''; 
 
    width: 15px; 
 
    height: 19px; 
 
    display: inline-block; 
 
    background: #f00; 
 
    border: 0; 
 
    border-radius: 0 15px 15px 0; 
 
    position: absolute; 
 
    top: 0; 
 
    left: -3px; 
 
}

<ol> 
 
    <li class="active">Step 1</li> 
 
    <li class="afteractive">Step 2</li> 
 
    <li>Step 3</li> 
 
</ol> 
 

 
<br /><br /> 
 

 
<ol> 
 
    <li>Step 1</li> 
 
    <li class="active">Step 2</li> 
 
    <li class="afteractive">Step 3</li> 
 
</ol> 
 

 
<br /><br /> 
 

 
<ol> 
 
    <li>Step 1</li> 
 
    <li>Step 2</li> 
 
    <li class="active">Step 3</li> 
 
</ol>

來源

2012-01-04 16:48:46

謝謝，我喜歡這個主意！雖然它似乎不適用於兩個白色元素之間..？ – 2012-01-06 14:59:47

我已經添加了邊框，所以它的工作原理 - http://jsfiddle.net/fMRbr/15/ – 2012-01-06 15:46:43

而不是使用border-radius和負margin值的，你認爲是Tbackground在每個<li>右上方圖像，看起來像這樣：

Greather than symbol

活性（紅色）<li>將具有類似的背景BU t紅色。結果應該是這個樣子：

enter image description here

來源

2012-01-04 15:21:46 NobRuked

Finaly解決方案可能基於右對齊的背景圖像，但我也需要解決頂部和底部的線條，這些線條不應該一直走到邊緣。 – 2012-01-04 15:24:57

span標記添加到您的李與display: inline-block讓他們自動增長到右側寬度：

HTML

<ol> 
    <li><span>Step 1</span></li> 
    <li class="active"><span>Step 2</span></li> 
    <li><span>Step 3</span></li> 
</ol>

css

li { 
    display: block; 
    float: left; 
    width: 33%; 
    margin: 0 0 0 -20px; 
    background-color: white; 
    text-indent: 40px; 
} 
li.active { 
} 

li.active span { 
    background-color: red; 
} 
li span { 
    display: inline-block; 
    border: 1px solid #ddd; 
    border-radius: 0 15px 15px 0; 
    padding-right: 10px; 
}

把這個解決方案的的jsfiddle這裏：

http://jsfiddle.net/c4urself/HYQSJ/

來源

2012-01-04 15:29:55 c4urself

但我確實需要重疊的項目，只能在另一個方向，以便結果將像@ NobRuked的圖像。 – 2012-01-04 15:35:39

新的列表項目遮蔽先前的項目因爲切緣陰性

回答

相關問題