列表中的最後一個分隔符不顯示

我有一個水平列表如下。列表中的最後一個分隔符不顯示

<ul> 
<li>Credits Left : 200 USD</li> 
<li>Items Cold : 58</li> 
<li>System Status : Online</li> 
<li>Sync Details : Updated </li> 
</ul>

Css如下。

#status ul{ 
height: 100%; 
width: 100%; 
padding:0px 0px 0px 0px; 
margin: 0px; 
} 

#status li{ 
float: left; 
list-style: none; 
display: block; 
padding: 20px 10px 20px 10px; 
color: #dcdcdc; 
font-size: 14px; 
font-family:MyriadProReg; 
background: url(../images/header_li_bg.jpg) no-repeat top left; 
}

但我最後一個元素沒有顯示分隔圖像。我怎樣才能解決這個問題。該圖像將解釋這個問題。

Result of my CSS

來源

2013-04-05 Imesh Chandrasiri

您在圖片的每個元素的左側定位。我建議通過邊界的解決方案 – Sprottenwels 2013-04-05 06:20:31

它無法顯示，因爲你使用的菜單項（右側無）左側的背景圖像的最後一個分隔符。這裏有一種方法可以使用僞元素（IE8 +）和絕對定位來修復它。

添加這些樣式：

#status li { 
    position:relative; 
} 
#status li:last-child:after { 
    display:block; 
    content:""; 
    position:absolute; 
    top:0; 
    left:100%; 
    background: url(../images/header_li_bg.jpg) no-repeat top left; 

    /* width of background image */ 
    width:5px; 
    /* height of background image */ 
    height:40px; 
}

來源

2013-04-05 06:21:40

謝謝，但你的答案有一個錯誤的東西！你已經定義了兩個寬度量，而不是高度和寬度。我編輯過，效果很好！謝謝。 :) – 2013-04-05 06:33:42

試試這個

#status ul{ 
height: 100%; 
width: 100%; 
padding:0px 0px 0px 0px; 
margin: 0px; 
background: url(../images/header_li_bg.jpg) no-repeat top left; 
} 

#status li{ 
float: left; 
list-style: none; 
display: block; 
padding: 20px 10px 20px 10px; 
color: #dcdcdc; 
font-size: 14px; 
font-family:MyriadProReg; 
background: url(../images/header_li_bg.jpg) no-repeat top right; 
}

來源

2013-04-05 06:33:07

列表中的最後一個分隔符不顯示

回答

相關問題