it-swarm.com.ru

Ли пункт на две строки. Вторая строка не имеет поля

В настоящее время я работаю над неупорядоченным списком, содержащим элементы списка с лозунгами. У меня проблема с одним элементом списка, который достаточно длинный, чтобы занять две строки (см. Изображение)

 enter image description here

Я хочу, чтобы вторая строка была выровнена с первой. Это код HTML, который я использую. Я использовал fontAwesome для проверки изображений.

ul {
  width: 300px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul class="fa-ul custom-list">
  <li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
  <li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
  <li><i class="fa fa-check fa-fw"></i>This is a list item that actually takes up 2 lines. Looks ugly</li>
</ul>

Я уже пытался ввести несколько &nbsp; между «2» и «строк», но это кажется мне очень плохой практикой. Я надеюсь, что кто-то может помочь мне с этой проблемой.

14
Kevin Groen

Это связано с тем, что галочка является встроенным содержимым, поэтому при переносе текста она будет продолжать течь как обычно.

Вы можете остановить это поведение, используя text-indent:

Свойство text-indent указывает, сколько горизонтального пространства следует оставить до начала первой строки текстового содержимого элемента.

text-indent ( https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent )

Предоставляя отрицательный код text-indent, вы можете указать первой строке сместить желаемую сумму влево. Если затем вы укажете положительный padding-left, вы можете отменить это смещение.

В следующем примере используется значение 1.28571429em, потому что это width, установленный в .fa-fw font-awesome.

ul {
  width: 300px;
}
li {
    padding-left: 1.28571429em;
    text-indent: -1.28571429em;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul class="fa-ul custom-list">
    <li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
    <li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
    <li><i class="fa fa-check fa-fw"></i>This is a list item that actually takes up 2 lines. Looks ugly</li>
</ul>

24
Hidden Hobbes

вы можете просто добавить это в свой ul:

ul {
text-indent:-20px; 
margin-left:20px;
}

JSFIDDLE

5
Alvaro Menéndez

Вы можете удалить извлечение из потока страниц, установив их с помощью position:absolute

ul {
  width: 300px;
}
.fa-fw {
  position: absolute;
  left: -22px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<ul class="fa-ul custom-list">
  <li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
  <li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
  <li><i class="fa fa-check fa-fw"></i>This is a list item that actually takes up 2 lines. Looks ugly</li>
</ul>

3
Danield

Вы можете использовать "display: table" в качестве стиля для li, а внутри создать диапазон со стилем "display: table-cell". Или создать соответствующий класс. Как это:

<li style="display:table"><span style="display:table-cell">text with 
all lines indented</span></li>
2
Hanna Howz

вы можете поместить свой текст в div и дать float:left своим внутренним li и div.

1
Majid Sadr
ul li{
padding: 10px 0 10px 20px;
text-indent: -1em;
}

добавить отступ и текстовый отступ - это перемещает текст из li: before.

0
m b k