Question

我想创建一个类似的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值设置为特定数字

Answer 1

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

列表缩进与标题相同的x-cord

1 个答案: