在有序列表中给出空格

我有下面的有序列表。在有序列表中给出空格

<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

，看看具体的问题，请伸展输出窗格中的小提琴，直到有没有水平滚动条。

感谢

来源

2014-11-25 user3872094

多少点最多可以有？您可以使用“span.item-num”的最小宽度。 – anpsmn 2014-11-25 07:03:09

先给宽跨：

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/

来源

2014-11-25 07:02:35

在有序列表中给出空格

回答

相关问题