問題描述

我需要在導(dǎo)航元素之間添加分隔符.分隔符是圖像.

I need to add separators between elements of navigation. Separators are images.

我的 HTML 結(jié)構(gòu)是這樣的:ol >李>一個>img.

My HTML structure is like: ol > li > a > img.

這里我提出了兩種可能的解決方案:

Here I come to two possible solutions:

1. 要添加更多 li 標(biāo)簽進行分隔(噓！)，
2. 在每個元素的圖像中包含分隔符(這更好，但它使用戶可能點擊，例如，主頁"，但進入服務(wù)"，因為它們是一個在另一個之后，用戶可以不小心點擊了屬于服務(wù)"的分隔符)；

1. To add more li tags for separation (boo!),
2. Include separator in image of each element (this is better, but it makes possibility that user may click on, example, "Home", but get to "Services", because they are one behind the other and user may accidentally click on separator that belongs to "Services");

怎么辦?

推薦答案

只需在li上使用分隔圖作為背景圖即可.

Simply use the separator image as a background image on the li.

要讓它只出現(xiàn)在列表項之間，請將圖像放在 li 的左側(cè)，但不要放在第一個.

To get it to only appear in between list items, position the image to the left of the li, but not on the first one.

例如:

#nav li + li {
    background:url('seperator.gif') no-repeat top left;
    padding-left: 10px
}

此 CSS 將圖像添加到跟在另一個列表項之后的每個列表項 - 換句話說，除了第一個之外的所有列表項.

This CSS adds the image to every list item that follows another list item - in other words all of them but the first.

注意.請注意 相鄰選擇器 (li + li) 在 IE6 中不起作用，因此您只需將背景圖像添加到常規(guī) li (使用條件樣式表)并可能應(yīng)用負邊距到邊緣之一.

NB. Be aware the adjacent selector (li + li) doesn't work in IE6, so you will have to just add the background image to the conventional li (with a conditional stylesheet) and perhaps apply a negative margin to one of the edges.

這篇關(guān)于導(dǎo)航分隔符的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！