我正在尝试实现水平列表的效果,其中标记是正方形,每个都有不同的颜色。这适用于Firefox / Opera:

HTML:

<ul id="legend">
    <li id="item1" class="legendMarker"><span class="legendText">Item1</span></li>
    <li id="item2" class="legendMarker"><span class="legendText">Item2</span></li>
    <li id="item3" class="legendMarker"><span class="legendText">Item3</span></li>
</ul>


CSS:

#legend {
    list-style-type: square;
    padding-left: 20px;
}
.legendMarker{
    float: left;
    font-size: 1em;
}
#item1 {
    color: #65E17B;
}
#item2 {
    color: #66A1D2;
}
#item3 {
    color: #007F16;
}
.legendText {
    color: black;
    padding-right: 35px;
    font-size: 0.9em;
}


但是在Safari和Chrome中,方形标记都消失了,我不知道为什么。我知道达到此效果的最佳方法可能是使用背景图像而不是HTML标记,但是我想知道为什么它不起作用。我应该注意,在Chrome和Safari中,如果我删除了float: left,标记会重新出现。任何人?

最佳答案

使用以下样式,它应可在所有浏览器上使用:

#legend {
    list-style-type: square;
}
.legendMarker{
    float: left;
    font-size: 1em;
    margin-left: 35px;
}
#item1 {
    color: #65E17B;
}
#item2 {
    color: #66A1D2;
}
#item3 {
    color: #007F16;
}
.legendText {
    color: black;
    font-size: 0.9em;
}


您无需在每个文本的右边添加填充,只需要在li项之间添加间距,因此可以在其中添加左边距。

关于html - 列表标记在Float上的Chrome和Safari中消失:左,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/16160638/

10-12 00:51
查看更多