我有一个水平列表如下。
<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;
}
但我最后一个元素没有显示分隔符图像。我怎样才能解决这个问题。图像将解释这个问题。
答案 0 :(得分: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;
}
答案 1 :(得分:0)
试试这个
#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;
}