Question

我想在网页上添加段落编号和旁注。我正在使用Huckleberry Finn作为测试：见http://jsfiddle.net/29Mdt/。

我想在左边的边距中加上段落编号，在右边的边距中加注旁注。使用HTML中的表格非常容易实现，但我正在尝试使用CSS，而且我是CSS的初学者。可以找到关于段落编号的早期问题here，但我没有找到答案。

提前感谢您的帮助。

Answer 1

一种方法：

.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：

<body class="chapter">
    <div class="page">
        <h1>Tom Sawyer</h1>

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

        <!-- sidenote to the paragraph following the aside tag -->
        <aside class="sidenote">The widow she cried over me...</aside>
        <p>Now the way that the...</p>
    </div>
</body>

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

1 个答案: