gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 15:06:40 25 4
gpt4 key购买 nike

我有一个水平列表如下。

 <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

最佳答案

它没有显示最后一个分隔符,因为您在菜单项的左侧使用了背景图像(右侧没有)。这是您可以使用伪元素 (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;
}

关于html - 列表中的最后一个分隔符未显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15827169/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com