gpt4 book ai didi

html - 列表标记在 Chrome 和 Safari 中消失在 Float : Left

转载 作者:行者123 更新时间:2023-11-28 13:00:47 35 4
gpt4 key购买 nike

我正在尝试实现水平列表的效果,其中标记为正方形,每个具有不同的颜色。这适用于 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;
}

您不需要为每个文本添加 padding right,您只需要 li 项之间的间距,因此为其添加 margin-left。

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

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