Ли на двух строках. Вторая строка не имеет разницы

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

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

ul {
  width: 300px;
}

<link href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'; return false;" 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>

Ответ 1

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

Вы можете остановить это поведение, воспользовавшись 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 шрифтом-удивительным.

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>

Ответ 2

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

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

JSFIDDLE

Ответ 3

Вы можете удалить проверку потока страницы, установив их в 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>

Ответ 4

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

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

Ответ 5

вы можете поместить свой текст в div и дать float:left to your inner li и div.

Ответ 6

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

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

Ответ 7

Я обнаружил, что это не работает надежно во всех браузерах и устройствах.

Этот код делает:

ul li {
    /*
     * We want the bullets outside of the list,
     * so the text is aligned. Now the actual bullet
     * is outside of the lists container
     */
    list-style-position: outside;

    /*
     * Because the bullet is outside of the lists
     * container, indent the list entirely
     */
    margin-left: 1em;
}

Оригинальный ответ