Jonathan M. Jonathan M. - 1 month ago 7
CSS Question

List Indentation same x-cord as header

I want to create a

list
that looks kind of like that:

This is a Header

- This is a list element

- This is an another list element

- This is an another list element

   but with a second line

I tried:



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>





Do you know a simple solution for that?

Preferred without setting any
padding
value to a specific number

Answer

Like this, using a pseudo, would be one option

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>

Comments