Question

我在下面的有序列表中。

<div class="chapter">
    <div class="judge">
        <div class="extract">
            <ol class="eng-orderedlist orderedlist">
                <li class="item">
                    <div class="para">
                        <span class="item-num">7b.8</span> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.
                    </div>
                </li>
                <li class="item">
                    <div class="para">
                        <span class="item-num">7b.8.4.2</span>   xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.
                    </div>
                </li>
                <li class="item">
                    <div class="para">
                        <span class="item-num">7b.8.4.3</span>   xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.
                    </div>
                </li></ol>
        </div>
    </div>
</div>

这里的问题是当我附加我的CSS并运行时，如果<span class="item-num">只有一个点（即4个字符），它看起来很好，如果它有多个点，那么它后面的文字正在缩进，我想让所有内容从一个点开始（就像表格一样）。以下是附带CSS的工作小提琴。

Fiddle

要查看确切的问题，请将输出窗格拉伸到小提琴中，直到没有水平滚动条。

由于

Answer 1

尝试给予跨度宽度：

CSS：

.orderedlist li.item div.para span.item-num {
    margin-left: -4.5em; //modified
    padding-right: 1em;
    text-indent: 0em;
    display: block;
    float: left;
    text-align: right;
    width:50px;//added
}

演示：http://jsfiddle.net/lotusgodkk/4mx2hkrh/1/

在有序列表中给出一个空格

1 个答案: