Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/35.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html 如何用emdash替换有序列表中的句点,并保持适当的缩进?_Html_Css_Html Lists - Fatal编程技术网

Html 如何用emdash替换有序列表中的句点,并保持适当的缩进?

Html 如何用emdash替换有序列表中的句点,并保持适当的缩进?,html,css,html-lists,Html,Css,Html Lists,我正在尝试设置有序列表的样式,以便数字与左边距对齐,句点替换为虚线,列表项的内容均匀缩进。我已经非常接近了: 这将使用以下CSS: ol { counter-reset: list; padding: 0; margin-left: 2em; } ol > li { list-style: none; /* remove this line and you can see the 'real' numbering */ } ol > li:before

我正在尝试设置有序列表的样式,以便数字与左边距对齐,句点替换为虚线,列表项的内容均匀缩进。我已经非常接近了:

这将使用以下CSS:

ol {
    counter-reset: list;
    padding: 0;
    margin-left: 2em;
}
ol > li {
    list-style: none; /* remove this line and you can see the 'real' numbering */
}
ol > li:before {
    content: counter(list) "— ";
    counter-increment: list;
    margin-left: -2em;
}
但这只是李彦宏留下的空白:在这之前,它看起来像这样,一旦数字超过10就停止工作。将emdash替换为其他角色也会破坏它

有没有办法做到这一点?

在ol中添加左填充,将伪元素设置为display:inline块,设置足够宽的宽度以满足预期的最大字符数,并应用text align:right

根据需要编辑您的值

ol{ 计数器复位:列表; 填充:0; 左:4em; 边缘:1米; } ol>li{ 列表样式:无; /*删除这一行,您可以看到“真实”编号*/ } 李:以前{ 内容:反清单-; 计数器增量:列表; 左边距:-4em; 宽度:2.5em; 显示:内联块; 文本对齐:右对齐; } 我的同僚们都是精英。普通贵族的选择权减去被认为是对乌拉姆的权利的累积权!这句话的主旨是,如果你犯了错误,那么你的劳动、通畅和身体练习都是错误的

Lorem ipsum dolor sit amet。 Lorem ipsum dolor sit amet。 Lorem ipsum dolor sit amet。 Lorem ipsum dolor sit amet。 Lorem ipsum dolor sit amet。 Lorem ipsum dolor sit amet。 Lorem ipsum dolor sit amet。 Lorem ipsum dolor sit amet。 Lorem ipsum dolor sit amet。 Lorem ipsum dolor sit amet。 Lorem ipsum dolor sit amet。 Lorem ipsum dolor sit amet。 Lorem ipsum dolor sit amet。 Lorem ipsum dolor sit amet。 Lorem ipsum dolor sit amet。
一旦长度超过一行,缩进将与第一行不匹配。这就是我一直在努力解决的问题。实际上,将宽度调整为4em会使它们完美地排列起来