html - 仍在尝试 CSS 样式目录

Question

在之前的几个问题中，我一直在尝试复制以下目录:

一些建议很有帮助，但“审查...”部分仍然有问题:请参阅 this JSBin或 this jsfiddle 的变体.

CSS如下:

.list li {
    position:relative;
    overflow:hidden;
    width:330px;}

.list li:after {
    font-family: Times New Roman;
    font-size: 120%;
    content:"...............";
    text-indent: -1px;
    display:block;
    letter-spacing:34px;
    position:absolute;
    left:0px;
    bottom:0px;
    z-index:-1;
    font-weight:bold;}

.list li span {
    display:inline;
    background-color:#FFF;
    padding-right:5px;}

.list li .number {
    float:right;
    font-weight:bold;
    padding-left:8px;}

任何帮助都会很棒，谢谢。

Answer 1

有一个非常简单的修复方法。只需将“...”伪元素的 left 设置更改为 1em。

.list li:after {
    left:1em;
}

jsFiddle Demo

---

更新:

当标题换行到第二行时，正确数字的位置出现问题。它可以通过添加一个名为“双线”的类来修复。

<li style="margin:0 0 .5em 0; padding-left:.6em;" class="two-lines">
    <span>A REVIEW OF THE PRINCIPAL QUESTIONS IN MORALS</span>
    <span class="number">1</span>
</li>

.two-lines {
     text-indent:-.6em; /* This was already on the inline-style */
}

.two-lines .number {
    padding-right: 0.8em; /* This is fixing the number's location issue */
}

jsFiddle Demo