Регулировка интервала в списке, содержащем значок и текст в HTML - PullRequest
Новая
       18

Регулировка интервала в списке, содержащем значок и текст в HTML

0 голосов
/ 08 ноября 2019

Всякий раз, когда мне нужно использовать длинное имя раздела внутри контейнера со списком для небольшого столбца (столбец 2). Мой текст становится ниже моей замечательной иконки, как показано ниже. Заранее спасибо!

enter image description here

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, чтобы мой текст во второй строке заполнялся точно ниже того места, где начинается мой первый текст, как показано ниже: b

1 Ответ

2 голосов
/ 08 ноября 2019

Не используйте &nbsp; для пробелов. При необходимости используйте padding / margin.

Здесь мы хотим установить для элемента 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>
...