css 有没有简单的方法可以防止文字环绕项目符号列表中的图标？

gudnpqoy 于 2022-11-27 发布在其他

关注(0)|答案(1)|浏览(133)

假设我有很多行，每行都有不同的图标，每个图标都很大。

<li><i class="bi bi-patch-check-fill icon-green" style="font-size:40px;"></I>Some text about whatever</li>

<li><i class="bi bi-bar-chart-fill icon-green" style="font-size:40px;"></I>Some other stuff</li>

<li><i class="bi bi-palette-fill icon-green" style="font-size:40px;"></I>Tons of more stuff I want to talk about</li>

现在，只要文本足够短，不会分成两行，一切都很好。但如果我将浏览器窗口变小，将行分成两行，则最下面的行将远离上面的行，最后将位于大图标下面。
有没有简单的方法来防止它这样做？

css

来源：https://stackoverflow.com/questions/74539453/is-there-a-simple-way-to-prevent-text-from-wraping-around-an-icon-in-a-bullet-po

1条答案

按热度按时间

yfwxisqw1#

也许可以去掉列表项，用一个段落来代替。一旦图标在每个段落中，你可以添加样式并将图标浮动到左边。如果你需要更多信息，请查看此链接https://www.w3schools.com/css/css_float.asp
希望这能帮上忙，祝你好运！

<p>
  <i
    class="bi bi-patch-check-fill icon-green"
    style="font-size: 40px; float: left"
  ></i
  >Some text about whatever. And if you try add some longer text here, it should be all displayed on the side of the icon and then underneath
</p>

<p>
  <i
    class="bi bi-bar-chart-fill icon-green"
    style="font-size: 40px; float: left"
  ></i
  >Some other stuff
</p>

<p>
  <i
    class="bi bi-palette-fill icon-green"
    style="font-size: 40px; float: left"
  ></i
  >Tons of more stuff I want to talk about
</p>

赞(0）回复(0）举报 2022-11-27

我来回答

css 有没有简单的方法可以防止文字环绕项目符号列表中的图标？

1条答案

相关问题

热门标签

最新问答