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

Question

每当我必须在容器内使用一个长的部分名称和一个小列 (col-2) 的列表时。我的文字在我的 fontawesome 图标下方，如下所示。提前致谢！

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>

如何将 space 留在 fontawesome 图标下方，以便我在第二行上的文本正好填充在我的第一个文本开始的位置下方，如下所示：

Answer 1

不要使用   作为间距。酌情使用 padding/margin。

我们在这里要做的是将 a 元素设置为具有 position:relative 并将图标绝对定位在其中。然后在 a 元素中，我们适当地设置左边距以缩进文本。

根据口味调整以下值。也许添加您自己的类而不是直接覆盖 bootstrap 类。

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 中调整包含图标和文本的列表中的间距

Adjusting spacing in a list containing icon and text in HTML

html

list

font-awesome

bootstrap-4