html - 在orderedlist中给一个空格

标签 html css

我有以下有序列表。

<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 ,直到没有水平滚动条。

谢谢

最佳答案

尝试给 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/

关于html - 在orderedlist中给一个空格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27120475/

相关文章:

html - 如何将图像固定到另一个图像 css

HTML 到 NSAttributeString 与 & 的问题

css - 当元素具有渐变过滤器时,DD Roundies 在 IE 中不起作用

javascript - Raphael JS 路径的“删除”动画

javascript - 网页(应用程序)布局 - 设置 100% 高度(html、css)

jquery - 将多个图像(带标题)对齐到基线,所有不同的高度

javascript - 模板内容是一个空文档片段

php - 如何使用 PHP 获取内容安全策略的违规报告(JSON 数据)?

javascript - 选项 :first-child isn't selecting the same in all cases

html - 如何将表单域设置为无效?