Блог

Главная - Вопросы по программированию - Отступ в списке совпадает с x-шнуром заголовка

Отступ в списке совпадает с x-шнуром заголовка

#html #css

#HTML #css

Вопрос:

Я хочу создать list , который выглядит примерно так:
Это заголовок
— Это элемент списка
— Это другой элемент списка
— Это другой элемент списка
, но со второй строкой

Я пытался:

 div#first ul{
  padding:0;
}  
 <div id="first">
<h1>This is a Header</h1>
<ul>
  <li>This is a list element</li>
  <li>This is another list element</li>
  <li>This is another list element<br/>but with a break</li>
</ul>
</div>    
 div#second ul{
  padding:0;
}
div#second li{
  list-style-position: inside;
}  
 <div id="second">
<h1>This is a Header</h1>
<ul>
  <li>This is a list element</li>
  <li>This is another list element</li>
  <li>This is another list element<br/>but with a break</li>
</ul>
</div>

Вы знаете простое решение для этого?
Предпочтительно без установки какого-либо padding значения на определенное число

Ответ №1:

Вот так, используя псевдо, было бы одним из вариантов

 div#first ul {
  padding:0;
  list-style-type: none;
}
div#first ul li {
  margin: 0 10px;
  position: relative;
}
div#first ul li::before {
  content: '-';
  position: absolute;
  left: -10px;
}  
 <div id="first">
<h1>This is a Header</h1>
<ul>
  <li>This is a list element</li>
  <li>This is another list element</li>
  <li>This is another list element<br/>but with a break</li>
</ul>
</div>

Комментарии:

1. Я пытаюсь в течение 20 минут с br и li, но у меня ничего не вышло. Я думаю, что ваше решение достаточно справедливо.

2. Спасибо за идею

3. Я надеялся, что это будет возможно без установки значений, подобных 10px. Но я буду придерживаться вашего решения, большое спасибо 🙂