0

我正在尝试实现水平列表的效果,其中标记是正方形,每个颜色都不同。这适用于 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. 任何人?

4

2 回答 2

0

如果您的页面没有 DOCTYPE 声明,则会发生这种情况。

于 2013-07-24T06:05:57.080 回答
0

使用以下样式,它应该适用于所有浏览器:

#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项目之间的间距,因此添加 margin-left 到它。

于 2013-04-23T04:25:17.877 回答