Html 带有段落编号和旁注的CSS样式段落_Html_Css

Html 带有段落编号和旁注的CSS样式段落

html css

Html 带有段落编号和旁注的CSS样式段落,html,css,Html,Css,我想在网上放一篇有段落号和旁注的文章。我用哈克贝利·费恩作为测试：看我想把段落号放在左边的空白处，把旁注放在右边的空白处。这在HTML中的表格中是非常容易做到的，但是我正在尝试用CSS来做到这一点，我是CSS的初学者。可以找到前面关于段落编号的问题，但我认为这些回答根本没有帮助提前感谢您的帮助。一种方法： .chapter { counter-reset: paragraph; padding-left: 20px; } .page p { width: 400px;

我想在网上放一篇有段落号和旁注的文章。我用哈克贝利·费恩作为测试：看

我想把段落号放在左边的空白处，把旁注放在右边的空白处。这在HTML中的表格中是非常容易做到的，但是我正在尝试用CSS来做到这一点，我是CSS的初学者。可以找到前面关于段落编号的问题，但我认为这些回答根本没有帮助

提前感谢您的帮助。

一种方法：

.chapter {
    counter-reset: paragraph;
    padding-left: 20px;
}
.page p {
    width: 400px;
}
.page p:before {
    position: absolute;
    margin-left: -20px;
    color: #CCC;
    content: counter(paragraph);
    counter-increment: paragraph;
}
.sidenote {
    position: absolute;
    margin-left: 420px;
    font-size: 14px;
    color: #E22;
    width: 100px;
}

HTML:


汤姆·索耶
你不了解我
她为我哭泣的寡妇。。。
现在的方式是

你能用

来做吗？我对此持怀疑态度，我想这是因为文本中包含了一些问题区域，对于下一个段落的编号应该放在哪里，这是一个真正的判断。因此，我想确保这些数字是由人工控制的。还有，有没有办法把列表编号拉回到左边距并去掉句号？@Gerben：我试过了，但我真的不知道我在做什么。顺便说一下，这是使用CSS2.1计数器：@Dave2“文本缩进”干扰了。尝试在“p:before”上使用绝对定位，例如：“left:5px；”而不是“左边距：-20px；”@我明白了。谢谢有没有办法修复第一段（没有缩进）？@asdf好的，现在我想唯一导致问题的是“p:第一个字母”。如果我能把它修好，我会很好的我不敢相信这没有投票权。这是使用CSS的圣经和法律句子编号。
```
<body class="chapter">
    <div class="page">
        <h1>Tom Sawyer</h1>

        <p>You don't know about me...</p>

        
        <aside class="sidenote">The widow she cried over me...</aside>
        <p>Now the way that the...</p>
    </div>
</body>
```