我想创建一个看起来像这样的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/