последний разделитель в списке не отображается

Question

У меня есть горизонтальный список, как показано ниже.

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

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

Но я последний элемент не показывает изображение разделителя. Как я могу это исправить. Изображение объяснит проблему.

Answer 1

Это не показывает последний разделитель, потому что вы используете фоновое изображение слева от пунктов меню (доли не справа). Здесь вы можете исправить это с помощью псевдоэлементов (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; 
} 

Answer 2

Попробуйте

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