Не переносите текст под группой списка значков

#html #css

Вопрос:

С помощью этого кода текст обертывается под значком. Как я могу сделать так, чтобы текст не заворачивался под значок, сохраняя при этом выравнивание?

Заранее спасибо!

 .list-group-item {
  width: 100%;
  text-align: left;
  background-color: #ffffff;
  border-color: #ffffff;
  color: #333;
  padding-left: 0;
}

.fa-check-circle {
  font-size: larger;
  color: black;
  vertical-align: middle;
  padding-right: 5px;
}

 <ul class="list-group">
  <li class="list-group-item"><i class="far fa-check-circle"></i><span class="features">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</span></li>
</ul>

Ответ №1:

Есть несколько способов добиться этого, но самый простой-удалить поля и отступы в ul, применить стиль списка:нет, чтобы удалить маркер собственного браузера для li.

Затем примените отступ слева к li, чтобы переместить его в виде блока, и дайте ему место слева для размещения значка. Обязательно сделайте его положение: относительное, так как значок будет располагаться абсолютно по отношению к li.

Затем значок можно сделать позицией: абсолютной и левой: 0, чтобы занять место в li, созданное левым заполнением.

РЕДАКТИРОВАТЬ: Существует встроенная версия этого через шрифт-Удивительный, который вы можете напрямую использовать для замены маркеров в ul — см. нижний пример. Требуется только стиль, чтобы освободить место для букв li, но значок вместо пули обрабатывается стилем FA.

 .list-group {
 margin-left: 0;
 padding-left: 0;
 list-style: none;
}

.list-group-item {
  width: 100%;
  background-color: #ffffff;
  border-color: #ffffff;
  color: #333;
  padding-left: 32px;
  position: relative;
  margin-bottom: 12px
}

.fa-check-circle {
  font-size: larger;
  color: black;
  vertical-align: middle;
  position: absolute;
  left: 0
}

.fa-ul li {
margin-bottom: 12px;}

 <link rel="stylesheet" type="text/css" media="all"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />

<b>Standard method - using spacing and position: absolute to position the icons.</b>
<ul class="list-group">
  <li class="list-group-item">
    <i class="far fa-check-circle"></i><span class="features">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</span>
  </li>
    <li class="list-group-item">
    <i class="far fa-check-circle"></i><span class="features">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</span>
  </li>
    <li class="list-group-item">
    <i class="far fa-check-circle"></i><span class="features">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</span>
  </li>
</ul>

<hr/>
<b>Native Font-aesome method - replacing the bulets with icons</b>
<ul class="fa-ul">
  <li><span class="fa-li"><i class="far fa-check-circle"></i></span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</li>
  <li><span class="fa-li"><i class="far fa-check-circle"></i></span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</li>
    <li><span class="fa-li"><i class="far fa-check-circle"></i></span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</li>
</ul>

1. Привет, спасибо за ответ. Я попробовал ваш CSS. Он работает с текстом, текст больше не завернут под иконку. Но теперь значок не выровнен. Ссылка

2. Переместите значок в нужное место через верхний / левый и т. Д