上面的列表邊框圖像..可能很容易

我可能有一天中最簡單的問題，但我很難找到一個直接的答案如何解決它（HTML/CSS-n00b）..上面的列表邊框圖像..可能很容易

我在我的標記中有一個img標記，並在那個包含水平列表的div標記下。在ul-CSS列表中，我聲明瞭一個頂部和底部邊框，img（這是一個帶有透明背景的.PNG）顯示在ul邊框頂部，這正是我想要的。但對於鋰CSS我右邊框的每個元素將它們分開，而這個邊界在IMG的前...

在這裏，你明白我的意思：

enter image description here

編輯：

#topLeftImage { 
    z-index: 999; 
    margin-left: 1em; 
    margin-top: 3px; 

#navigationlist li 
{ 
    z-index: 0; 
    display: inline; 
    list-style-type: none; 
    padding-right: 2px; 
    font-size: 75%; 
    border-right: 2px solid #C0C0C0;

}

那麼，如何申報IMG爲它的前方，李界來表現？另一個快速的問題是，我可以聲明這樣一個最後的li元素沒有得到該邊界的權利，因爲它沒有右鄰居嗎？

任何提示將有所幫助！

-Thanks

來源

2011-02-05 AndroidHustle

您是否使用IE來檢查您正在進行的這些更改的結果？ IE的z-index方法有點精神。嘗試下面的代碼，看看是否有幫助。

#topLeftImage { 
    z-index: 999; 
    margin-left: 1em; 
    margin-top: 3px; 
    position:relative; 
} 

#navigationlist li { 
    z-index: 0; 
    display: inline; 
    list-style-type: none; 
    padding-right: 2px; 
    font-size: 75%; 
    border-right: 2px solid #C0C0C0; 
    position:relative; 
}

，並給這兩個項目的父：

#parent { 
    z-index: 0; 
    position:relative; 
}

來源

2011-02-05 14:04:09 lnrbob

您可以設置z-index:9999;爲IMG如果你給它一個類和/或設置爲z-index:0;李的類。

例如

img.className { 
    z-index:9999; 
} 

li.className { 
    z-index:0; 
}

或者，如果你使用的ID：

img#idName { 
    z-index:9999; 
} 

li#idName { 
    z-index:0; 
}

來源

2011-02-05 13:15:19

感謝您的幫助！ =） – AndroidHustle 2011-02-05 13:36:07

首先CSS屬性的z-index應該幫助的第一個問題。

img{ 
    z-index:999; 
}

這應該使它看起來高於一切。

（重要......要小心這雖然...圖像的整個地區將被顯示在導航的頂部，使其無法點擊項目一個超鏈接。）

對於後者問題，你可以使用last-child僞類將右邊框設置爲無。例如。

#nav li:last-child{ 
    border-right:none; 
}

這是一個CSS3功能...所以IE8及以下版本不會讓它工作。也許只需在最後一項中添加一個類將是瀏覽器最友好的方式！

#nav li.last{ 
    border-right:none; 
} 

<li>normal</li><li class="last">furthest right</li>

讓我知道z-index是由我和另一個人建議導致我概述的問題。會有一些解決方案，但需要一點努力！

來源

2011-02-05 13:21:09 SamMullins

謝謝！避免邊界的最後一個提示非常好用！但是對於z-index ..我試圖設置z-index：999;到我的img-id在CSS中，沒有做任何改變，也嘗試給出li-id z-index：0;在CSS中，但也沒有幫助。我想你可以使用這個Z索引與ID的，以及不僅與類？（我會把代碼放在一個編輯中） – AndroidHustle 2011-02-05 13:29:35

是的，你可以在ID和類中使用它，但記住它是否是一個ID使用`img＃idName {z-index：9999; }`如果它是一個類的使用：`img.idName {z-index：9999; }` – 2011-02-05 13:40:49

是的，謝謝。它看起來是正確的，但它似乎並沒有這樣做..試圖設置z-index 0和-1我的李和我的ul，以及設置999我的形象，沒有做任何事情..真的奇怪..但我會繼續嘗試，也許可以解決它。謝謝您的幫助！（不幸的是，我沒有太多的評價來評價你們...... =） – AndroidHustle 2011-02-05 13:52:26

在你的代碼中使用 z-index

，並正確，但你必須記住，z-index工作僅與定位的元素。因此，在這兩個#navigationlist li和#topLeftImage添加position:relative;

來源

2011-02-05 14:05:27 Sotiris

上面的列表邊框圖像..可能很容易

回答

相關問題