左表格单元格边距和上边距不起作用

Question

我尝试添加保证金顶部和保证金，但不起作用。

<li>li 1 <br/> new line</li>
<li>li 2 <br/> new line</li>

和CSS

li {
    list-style: none;
    counter-increment: foo;
    display: table-row;
}

li::before {
    content: "-";
    display: table-cell;
    text-align: right;
    padding-right: 5px;    
}

https://jsfiddle.net/b5rtg568/

Answer 1

你不能在table-cell上应用边距，你尝试完成任务的方式似乎也很奇怪，尝试使用CSS定位技术获得相同的结果并以更好的方式使用

Demo

Demo 2 （在margin元素上使用li）

li {
    list-style: none;
    margin-left: 15px;
    position: relative;
}

li::before {
    content: "-";
    position: absolute;
    left: -10px;
}

在这里，我使用CSS定位技术通过使用-属性的负值将left前缀移到列表项之外。现在，您可以对margin-top元素使用margin-left和li属性，如果需要，还可以相应地定位-。

一些提示，而不是使用li包装文本，您应该使用p标记或<h2>或<h3>标记，这将为您的内容提供更多语义含义，您不必使用脏的<br>标记将内容分成两行，因为如果您将使用我建议的块级的上述元素，则会自动完成默认并占用100％的空间。

Answer 2

边距，填充，高度对'table-row'没有影响，因此你必须将你的li显示属性设置为'阻止'。