html - 在orderedlist中给一个空格

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 。

Fiddle

要查看确切的问题，请拉 fiddle 输出 Pane ，直到没有水平滚动条。

谢谢

Answer 1

尝试给 span 宽度:

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/