我有以下有序列表。
<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 输出 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
}
关于html - 在orderedlist中给一个空格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27120475/