html - 准确安装定制子弹

Question

由于 ul 不支持带破折号的列表，我创建了一个 dash 类，它删除了 list-style 并插入了一个 en - 前面的破折号如下。

<style>
ul.dash{list-style:none}
ul.dash>li:before{content:"\2013"}
</style>

然后我写了下面的代码。

<ul><li>This is a sentence.</li></ul>
<ul class="dash"><li>This is a sentence.</li></ul>
<ul style="list-style:circle"><li>This is a sentence.</li></ul>
<ul style="list-style:square"><li>This is a sentence.</li></ul>

在这里，我想准确对齐这四个列表。除了第二个之外，其他都像本地人一样好。我尝试对 padding 和 margin 设置进行微观管理，但找不到默认数字。谢谢。

Answer 1

我认为(据我所知)没有任何方法可以将其设置为完美对齐。但在这里我尝试用 position:absolute; 来设置它，你可以检查下面的 fiddle ...

ul.dash{list-style:none;}
ul.dash>li:before{content:"\2013";margin-right: 10px;}
ul {
    position: relative;
    float: left;
    width: 100%;
}
li {
    position: absolute;
}
.dash li {
    left: 23px;
}

<ul><li>This is a sentence.</li></ul>
<ul class="dash"><li>This is a sentence.</li></ul>
<ul style="list-style:circle"><li>This is a sentence.</li></ul>
<ul style="list-style:square"><li>This is a sentence.</li></ul>

您也可以通过在 ul.dash>li:before 中设置每个元素符号来做到这一点。

谢谢!