我遇到了一个我以前从未遇到过的奇怪的css错误。我在内联显示的列表元素中使用图像列表。在Chrome中一切正常,但是当使用Mozilla浏览时,最后一个li元素出现在第二行中。尝试更改一些值,但没有结果!有人遇到同样的问题并解决了它吗?
https://i.stack.imgur.com/0N4NW.jpg
.CSS
#std-signs ul {
width: 736px;
min-width: 736px;
height: 52px;
margin: auto;
display: block;
}
#std-signs ul li {
display: inline-block;
width: 52px;
height: 52px;
margin-right: 1.5em;
}
#std-signs ul li:last-child {
margin-right: 0 !important;
}
您可以使用
display: table-cell;
而不是display: inline-block;
#std-signs ul li {
display: table-cell;
width: 52px;
height: 52px;
margin-right: 1.5em;
}
并向右留边距
#std-signs ul {
width: 736px;
min-width: 736px;
height: 52px;
margin: auto;
display: block;
border-spacing: 1.5em;
}