Разрыв строки внутри элемента списка создает пространство между строками

Я хочу разбить строку <br/> внутри a <li> Как:

  • Первая линия
    вторая строка
  • Второй li
  • третий li

но при этом (обе метки) - я получаю пробел между ними. margin и padding равно 0, но все же я понимаю. любая идея, как избавиться от него? Спасибо!

Ответы

Ответ 1

Вы можете изменить свойство line-height в своем css. Помогает ли это?

Ответ 2

Это простое решение...

добавив <br/><br/> в ваш <li>, добавит пустой разрыв строки под

<ul>
    <li>Line 1<br/><br/></li>
    <li>Line 2</li>
    <li>Line 3</li>
    <li>Line 4<br/><br/></li>
    <li>Line 5</li>
</ul>

Ответ 3

В качестве дополнительной заметки для Wordpress &nbsp; и <br /> будут автоматически удалены, если они есть перед закрытием </li>.

В хакерском режиме вы можете использовать бездокументальную нулевую ширину (&zwnj;) или невидимый разделитель (&#8291;).

В текстовом режиме выполните возврат каретки и вставьте &zwnj; перед закрытием </li>.

Пример:

<ul>
  <li>List item with a blank line below
  &zwnj;</li>
  <li>List item</li>
</ul>

Ответ 4

Для будущих людей, которые в конечном итоге на этот вопрос, как я: добавление white-space: pre-wrap; к <ul> сработало для меня! Он также работает с \n в качестве дополнительного бонуса :)

ul {
  white-space: pre-wrap;
}

Ответ 5

Попробуйте это

<ul>
    <li>First Line</br>First Second Line</li>
    <li>Second Line</li>
</ul>

Проверить это

Ответ 6

Улучшение в Rudrik Ответ:

<UL>
   <LI>First Line
      <DD>Second Line</DD> <!-- No Space -->
   </LI>
   <LI>Third Line</LI>
   <LI>Fourth Line</LI>
</UL>

Слово!

Ответ 7

  <dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>





  Coffee
    - black hot drink
  Milk
    - white cold drink

Надеюсь, это может помочь.

Ответ 8

Попробуйте сыграть с "высотой строки".

Ответ 9

Возможно ли это для вас?

<ul>
    <li><div>First line</div> second line</li>
    <li>Second li</li>
    <li>third li</li>
</ul>

Ответ 10

Попробуйте это;

/* CSS */

#keyskills:after {
content:"I.T. – data analytical, planning, design and interaction skills \A Data logging and reporting - averaging about 60 WPM \A Research skills, able to provide intermediate I.T. support ";
white-space: pre;

}

/* Тело HTML */

<p id="keyskills">

Ответ 11

Попробуйте использовать как flex, так и flex-direction. Это сработало для меня.

Ответ 12

Используя встроенный CSS, создайте разделение с фиксированной высотой, но без содержимого, чтобы создать пустую строку между элементами списка, как при использовании вложенных списков. Если вы мало знаете о CSS, просто скопируйте это решение и отредактируйте высоту (в пикселях), чтобы изменить высоту пустой строки. Поместите пустую строку с этим кодом в любом месте списка и установите любую высоту, которую вы хотите для каждой созданной пустой строки.

<ul>
    <li>Line 1</li>
    <li>Line 2</li>
    <li>Line 3</li>
    <li>Line 4
       <div style="height: 10px;">
       </div>
    </li>
    <li>Line 5</li>
</ul>