列表缩进与标题相同的x线

Question

我想创建一个list，看起来像这样:
这是一个Header
-这是一个列表元素
-这是另一个列表元素
-这是另一个列表元素
   

我试着:

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值为特定的数字

Answer 1

像这样，使用pseudo，将是一个选项

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>