css 当文本在多行上时，如何避免文本出现在图标下面[duplicate]

pnwntuvh 于 2023-01-22 发布在其他

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

- 此问题在此处已有答案**：

How to keep indent for second line in ordered lists via CSS?（14个答案）
昨天关门了。
有了下面的代码片段，当窗口变小，宽度变小，文本断成多行。
问题是它不应该在图标下面，它应该从与上面文本相同的位置开始。

.my-style {
  padding: 0;
  list-style-type: none;
  display: table;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div>
  <ul class="my-style">
    <li><i class="far fa-check hacker-green tickbox"></i> This is a very very long text that breaks into multiple lines sometimes</li>
    <li><i class="far fa-check hacker-green tickbox"></i> This should do the same thing as the above text of course</li>
    <li><i class="far fa-check hacker-green tickbox"></i> Argentina is the current world champion at footbal thanks to Messi</li>
    <li><i class="far fa-check hacker-green tickbox"></i> What else should we say about this great accomplishment? Nothing more is needed</li>
  </ul>
</div>

display: table或display: table-cell似乎不起作用

css

来源：https://stackoverflow.com/questions/75182348/how-to-avoid-text-going-under-the-icon-when-it-is-on-multiple-lines

1条答案

按热度按时间

okxuctiv1#

如果我没理解错的话，你想创建一个带有自定义图标的列表。要做到这一点，你可以在ul上应用list-style:none，以删除默认的列表项目符号，并在li上使用::before，你可以创建"图标一样"的效果。注意，你可能需要玩一点填充和边距，这取决于你要使用多大的图标。

.my-style {
  padding: 0;
  list-style: none;
}

.my-style li {
  padding-left: 10px
}

.my-style li::before {
  content: '\f00c';
  display: inline-block;
  margin-left: -15px;
}

<ul class="my-style">
  <li>This is a very very long text that breaks into multiple lines sometimes</li>
  <li>This should do the same thing as the above text of course</li>
  <li>Argentina is the current world champion at footbal thanks to Messi</li>
  <li>What else should we say about this great accomplishment? Nothing more is needed</li>
</ul>

另外，请注意，您需要在::before中使用Fontawesome图标unicode

赞(0）回复(0）举报 2023-01-22

我来回答

css 当文本在多行上时，如何避免文本出现在图标下面[duplicate]

1条答案

相关问题

热门标签

最新问答