调整包含图标和HTML文本的列表中的间距

2024-05-04 • 问答

每当我必须在带有小列列表（col-2）的容器内使用长节名称时。我的文字显示在我的字体图标下方，如下所示。预先感谢！

PFB HTML代码：

<ul class="js-scroll-nav list-group list-group-transparent list-group-flush list-group-borderless py-3 px-3">
  <li>
    <a class="list-group-item list-group-item-action font-weight-medium mb-0 mb-md-2" href="#online">
      <i class="fas fa-play-circle  fa-lg"></i>&nbsp; &nbsp; List Item Apple Strudel
    </a>

  </li>
  <li>
    <a class="list-group-item list-group-item-action font-weight-medium mb-0 mb-md-2" href="#discourses"><i class="fas fa-play-circle  fa-lg"></i>&nbsp; &nbsp; List Item PumpkinStrudel
                                </a>
  </li>

  <li>
    <a class="list-group-item list-group-item-action font-weight-medium mb-0 mb-md-2" href="#disciple"><i class="fas fa-play-circle  fa-lg"></i>&nbsp; &nbsp; List Item berryStrudel</a>
  </li>
  <li>
    <a class="list-group-item list-group-item-action font-weight-medium mb-0 mb-md-2" href="#yogic"><i class="fas fa-play-circle  fa-lg"></i>&nbsp; &nbsp; List Item CokeStrudel</a>
  </li>
  <li>
    <a class="list-group-item list-group-item-action font-weight-medium mb-0 mb-md-2" href="#events"><i class="fas fa-play-circle  fa-lg"></i>&nbsp; &nbsp; List Item DoritosStrudel</a>
  </li>
</ul>

如何在fontawesome图标下方留出空间，以便第二行的文本从第一个文本的开头开始恰好填充在下面，如下所示：

请勿使用 作为间距。适当使用填充/边距。

我们要在此处进行的操作是将a元素设置为具有position:relative，并将图标绝对放置在其中。然后，在a元素中，我们适当设置左填充以缩进文本。

调整以下值以品尝。也许添加您自己的类，而不是直接覆盖引导类。

a.list-group-item-action {
  position: relative;
  padding-left: 30px;
}

.list-group-item-action i.fas {
  position: absolute;
  left: 10px;
}

.list-group {
  width:30%;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<ul class="js-scroll-nav list-group list-group-transparent list-group-flush list-group-borderless py-3 px-3">
  <li>
    <a class="list-group-item list-group-item-action font-weight-medium mb-0 mb-md-2" href="#online">
      <i class="fas fa-play-circle  fa-lg"></i>List Item Apple Strudel
    </a>

  </li>
  <li>
    <a class="list-group-item list-group-item-action font-weight-medium mb-0 mb-md-2" href="#discourses"><i class="fas fa-play-circle  fa-lg"></i>List Item PumpkinStrudel
                                </a>
  </li>

  <li>
    <a class="list-group-item list-group-item-action font-weight-medium mb-0 mb-md-2" href="#disciple"><i class="fas fa-play-circle  fa-lg"></i>List Item BerryStrudel</a>
  </li>
  <li>
    <a class="list-group-item list-group-item-action font-weight-medium mb-0 mb-md-2" href="#yogic"><i class="fas fa-play-circle  fa-lg"></i>List Item CokeStrudel</a>
  </li>
  <li>
    <a class="list-group-item list-group-item-action font-weight-medium mb-0 mb-md-2" href="#events"><i class="fas fa-play-circle  fa-lg"></i>List Item DoritosStrudel</a>
  </li>
</ul>

调整包含图标和HTML文本的列表中的间距

blzhi 回答：调整包含图标和HTML文本的列表中的间距

大家都在问