我想创建一个看起来像这样的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值设置为特定数字

最佳答案

这样,使用伪指令将是一种选择



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>

关于html - 列表缩进与标题相同的x-cord,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/40207876/

10-12 12:53
查看更多