css 请提供项目符号列表所需的帮助

46qrfjad 于 2022-12-24 发布在其他

关注(0)|答案(2)|浏览(155)

我创建了一个项目符号列表，它的项目符号和文本颜色不同。它运行得很好，直到有人打电话说它在Chrome和Edge中关闭了，但在我正在开发的Firefox中看起来非常好。问题是当项目符号有多行时，第一行会被推得更远，没有与底部文本内联，但这种情况只发生在Chrome和Edge中。有人能帮忙吗？

ul.bt-bullet {
  margin-left: 0px;
}

ul.bt-bullet li {
  list-style-position: inside;
  text-indent: -1.4em;
  padding-left: 1.4em;
  padding-bottom: 10px;
  font-size: 25px;
  line-height: 25px;
  color: #F18D21 !important;
}

ul.bt-bullet li span {
  font-family: "Roboto", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 22px;
  margin-left: 10px;
  color: #000000;
}

<ul class="bt-bullet">
  <li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lobortis facilisis turpis, vitae pulvinar lorem maximus nec. Maecenas non blandit justo. Sed volutpat arcu diam, vestibulum luctus urna fermentum quis. Vestibulum vitae justo vestibulum, posuere tortor sit amet, faucibus urna.</span></li>
  <li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lobortis facilisis turpis, vitae pulvinar lorem maximus nec. Maecenas non blandit justo. Sed volutpat arcu diam, vestibulum luctus urna fermentum quis. Vestibulum vitae justo vestibulum, posuere tortor sit amet, faucibus urna.</span></li>
  <li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lobortis facilisis turpis, vitae pulvinar lorem maximus nec. Maecenas non blandit justo. Sed volutpat arcu diam, vestibulum luctus urna fermentum quis. Vestibulum vitae justo vestibulum, posuere tortor sit amet, faucibus urna.</span></li>
</ul>

css

来源：https://stackoverflow.com/questions/74904116/please-help-needed-with-bullet-list

2条答案

按热度按时间

dy2hfwbg1#

问题出在margin-left: 10px;线路上。
删除它，您将看到以下结果：

ul.bt-bullet {
    margin-left: 0px;
}
ul.bt-bullet li {
    list-style-position: outside;
    padding-left: 1.4em;
    padding-bottom: 10px;
    font-size: 25px;
    line-height: 25px;
    color: #F18D21 !important;
}
ul.bt-bullet li span {
    font-family: "Roboto", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 22px;
    color: #000000;
}

<ul class="bt-bullet">
    <li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lobortis facilisis turpis, vitae pulvinar lorem maximus nec. Maecenas non blandit justo. Sed volutpat arcu diam, vestibulum luctus urna fermentum quis. Vestibulum vitae justo vestibulum, posuere tortor sit amet, faucibus urna.</span></li>
    <li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lobortis facilisis turpis, vitae pulvinar lorem maximus nec. Maecenas non blandit justo. Sed volutpat arcu diam, vestibulum luctus urna fermentum quis. Vestibulum vitae justo vestibulum, posuere tortor sit amet, faucibus urna.</span></li>
    <li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lobortis facilisis turpis, vitae pulvinar lorem maximus nec. Maecenas non blandit justo. Sed volutpat arcu diam, vestibulum luctus urna fermentum quis. Vestibulum vitae justo vestibulum, posuere tortor sit amet, faucibus urna.</span></li>
</ul>

赞(0）回复(0）举报 2022-12-24

6fe3ivhb2#

希望这能有所帮助，在CSS代码中注解了几行。请注意。

ul.bt-bullet {
    margin-left: 0px;
}
ul.bt-bullet li {
    list-style-position: outside !important;
/*     text-indent: -1.4em; */
    padding-left: 10px;
    padding-bottom: 10px;
    font-size: 25px;
    line-height: 25px;
    color: #F18D21 !important;
}
ul.bt-bullet li span {
    font-family: "Roboto", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 22px;
 /*   margin-left: 10px; */
    color: #000000;
}

<ul class="bt-bullet">
    <li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lobortis facilisis turpis, vitae pulvinar lorem maximus nec. Maecenas non blandit justo. Sed volutpat arcu diam, vestibulum luctus urna fermentum quis. Vestibulum vitae justo vestibulum, posuere tortor sit amet, faucibus urna.</span></li>
    <li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lobortis facilisis turpis, vitae pulvinar lorem maximus nec. Maecenas non blandit justo. Sed volutpat arcu diam, vestibulum luctus urna fermentum quis. Vestibulum vitae justo vestibulum, posuere tortor sit amet, faucibus urna.</span></li>
    <li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lobortis facilisis turpis, vitae pulvinar lorem maximus nec. Maecenas non blandit justo. Sed volutpat arcu diam, vestibulum luctus urna fermentum quis. Vestibulum vitae justo vestibulum, posuere tortor sit amet, faucibus urna.</span></li>
</ul>

赞(0）回复(0）举报 2022-12-24

我来回答

css 请提供项目符号列表所需的帮助

2条答案

相关问题

热门标签

最新问答