1

我正在尝试在 CSS 中重新创建目录。我以前在这里得到了一些帮助，但结果仍然不正确，并且涉及很多杂乱无章的事情。这是一张将原始目录与我重新创建它的尝试进行比较的图像。

比较图像

如您所见，仍然存在一个问题：“A REVIEW OF THE PRINCIPAL QUESTIONS IN MORALS”在“IN”之后而不是“QUESTIONS”之后换行。

这是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 时，或者至少不要让它变得比现在更糟？

4

1 回答 1

0

我知道这是一个四年前的问题，所以我怀疑这个答案对你有多大用处，但一个简单的<br>“问题”之后将解决你的包装问题。

似乎您的包装与图像不完全对齐是由于字体的差异，特别是字体的宽度，所以我认为在纯 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;
}
<div style="width: 401px; padding-left: 90px">
    <div style="margin:25px 0 200px 0">
        <div style="text-align:center;font-size:150%;letter-spacing:.2em;margin-bottom:10px;margin-right:-.2em;">CONTENTS</div>
        <ul class="list" style="padding-left:22px;">
            <li style="margin:0 0 .6em 0;"><span>EDITOR&rsquo;S INTRODUCTION</span><span class="number">ix</span>
            </li>
            <li style="margin:0 0 .5em 0;"><span style="padding-left:.9em;">1. Historical</span><span class="number">ix</span>
            </li>
            <li style="margin:0 0 .5em 0;"><span style="padding-left:.9em;">2. Epistemology</span><span class="number">xii</span>
            </li>
            <li style="margin:0 0 .5em 0;"><span style="padding-left:.9em;">3. Epistemology of Morals</span><span class="number">xx</span>
            </li>
            <li style="margin:0 0 .5em 0;"><span style="padding-left:.9em;">4. Psychology of Morals</span><span class="number">xxvi</span>
            </li>
            <li style="margin:0 0 .5em 0;"><span style="padding-left:.9em;">5. The Moral System</span><span class="number">xxx</span>
            </li>
            <li style="margin:0 0 1.5em 0;"><span style="padding-left:.9em;">6. Morals and Theology</span><span class="number">xliii</span>
            </li>
            <li style="margin:0 0 .5em 0; padding-left:.9em;" class="two-lines"><span>A REVIEW OF THE PRINCIPAL QUESTIONS<br> IN MORALS</span><span class="number" style="padding-left:2em;">1</span>
            </li>
            <li style="margin:0 0 .5em 0;"><span style="padding-left:.9em;">INDEX</span><span class="number">297</span>
            </li>
    </ul>
</div>
</div>

你也有一个</div>你应该有一个</ul>.

于 2018-07-08T20:35:54.987 回答