html - 列表中的最后一个分隔符未显示

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