목록의 마지막 구분 기호가 표시되지 않습니다.

Question

다음과 같은 가로 목록이 있습니다.

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

하지만 마지막 요소가 구분 기호 이미지를 표시하지 않습니다. 어떻게 해결할 수 있을까요? 이미지가 문제를 설명합니다. 이 메뉴 항목 (오른쪽 없음)의 왼쪽에 배경 이미지를 사용하고 있기 때문에

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