在li中给出100％的跨度高度

Question

当我的html提供此输出时：

但我想这样：

所以你怎么看我试图添加一个span数字有空格。 我给了这个班级：

.spanContainer{
   height:100%; 
   padding-right:15px 
}

但不知怎的，height:100%给了我不理想的效果！我该怎么办？谢谢 http://jsfiddle.net/52VtD/3398/

<ul class="list-group">
    <li class="list-group-item">
        <span class="spanContainer">
            <a class="text-success">02401</a>
        </span>
        H2-Atemtest
    </li>
    <li class="list-group-item">
        <span class="spanContainer">
            <a class="text-success">03241</a>
        </span>
        Computergestützte Auswertung eines kontinuierlich aufgezeichneten Langzeit-EKG von mindestens 18 Stunden Dauer
    </li>
</ul>

Answer 1

<span>是内联元素，height属性不适用于未替换的内联元素。

此外，将span元素的默认显示类型更改为block在此处没有用，因为您使用了height属性的百分比值。

因为，相对于生成的包含块的高度计算高度属性的百分比值。在这种情况下，容器块没有明确的高度。

来自 MDN ：

  

百分比是根据高度计算的   生成的框包含块。如果含有的高度   未明确指定块（即，它取决于内容   高度），这个元素并不是绝对定位的值   计算自动。根元素的百分比高度是相对的   到最初的包含块。

不是在height上设置<span>属性，而是可以将<span>浮动到左侧，用段落元素包装内联文本并使用margin-left属性来生成案文如下：

.spanContainer{
   /* height:100%; 
   padding-right:15px  */
    float: left;
}

.list-group-item p {
    margin: 0;
    margin-left: 50px;
}

<强> WORKING DEMO

Answer 2

只需将.spanContainer元素浮动到左侧，然后将文本元素的显示更改为table。这样做的原因是因为浮动元素基本上是从流中取出的，而.spanText将填充剩余区域，按照需要运行。

EXAMPLE HERE

.spanContainer {
    float:left;
    padding-right:15px;
}
.spanText {
    display: table;
}

值得注意的是IE7 and lower中不支持display:table。