Html CSS样式目录，恼人的小细节，避免混乱

我正在尝试用CSS重新创建一个目录。我以前在这里得到过一些帮助，但是结果仍然是不正确的，而且它们涉及到很多困难。这是一张图片，将原始目录与我试图重新创建的目录进行了比较

正如你所看到的，仍然存在一个问题：“对道德中主要问题的回顾”在“IN”之后而不是在“问题”之后

以下是CSS：

.list li {
    position:relative;
    overflow:hidden;
    width:360px;
}
.list li:after {
    font-size:120%;
    content:"...............";
    text-indent:1px;
    display:block;
    letter-spacing:40px;
    position:absolute;
    left:1em;
    bottom:0px;
    z-index:-1;
    font-weight:bold;
}
.list li span {
    display:inline;
    max-width:100px;
    background-color:#fff;
    padding-right:12px;
}
.list li .number {
    float:right;
    font-weight:bold;
    padding-left:15px;
}
.two-lines {
    text-indent:-.9em;
}
.list .two-lines:after {
    text-indent: 1px;
}
.two-lines .number {
    bottom:0px;
    right:0px;
    padding-right: 1.2em;
}

正如你所看到的，这是非常混乱的。一个jsfiddle是

---

是否有人知道如何解决包装问题，最好是在清理CSS时，或者至少不让问题变得更糟？

我知道这是一个四年前的问题，所以我怀疑这个答案对您是否有多大用处，但在“问题”之后简单的

将解决包装问题

看起来你的包装不完全与图像对齐是因为字体的不同，特别是字体的宽度，所以我认为没有更干净的方法在纯css中实现这种效果。由于响应性或多用途代码似乎不是您想要的，因此硬编码解决方案不应该成为问题

.list li{
位置：相对位置；
溢出：隐藏；
宽度：360px；
}
李：之后呢{
字体大小：120%；
内容：“……”；
文本缩进：1px；
显示：块；
字母间距：40px；
位置：绝对位置；
左：1米；
底部：0px；
z指数：-1；
字体大小：粗体；
}
李鹏{
显示：内联；
最大宽度：100px；
背景色：#fff；
右侧填充：12px；
}
1.名单李{
浮动：对；
字体大小：粗体；
左侧填充：15px；
}
.两行{
文本缩进：-.9em；
}
.列表.两行：后面{
文本缩进：1px；
}
.两行.号码{
底部：0px；
右：0px；
右侧填充：1.2米；
}

目录

编辑；S简介九

1。历史主义

2。认识论

3。道德的认识论

4。道德心理学xvi

5。道德体系

6。道德与神学

对《道德1》中主要问题的回顾

INDEX297