在li元素中将span的高度设置为100%

Question

这是我的 HTML 输出结果：

但我希望它像这样：

你可以看到，我尝试在数字所在的空格处添加了一个 span。我给这个 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>

- John Smith

---

<li>必须明确设置高度。请参见https://dev59.com/7mw05IYBdhLWcg3wwEYS。 - Patryk Hes

Answer 1

只需将 .spanContainer 元素向左浮动，并将文本元素的显示更改为 table。 这样做的原因是，浮动元素本质上已经脱离了文档流，而 .spanText 将填充剩余的区域，实现所需的功能。 此处有示例

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

值得注意的是，在IE7及更低版本中不支持"display:table"。请参考CSS Table了解更多信息。

- Josh Crozier

Answer 2

是一个内联元素，而非替换的内联元素不适用于height属性。

此外，将元素的默认显示类型更改为block在这里没有用处，因为您正在使用百分比值作为高度属性。

因为，高度属性的百分比值是相对于生成框的包含块的高度计算的。而在本例中，容器块没有显式高度。

来自MDN：

百分比是相对于生成框的包含块的高度计算的。如果未明确指定包含块的高度（即它取决于内容高度），并且此元素未绝对定位，则该值计算为auto。根元素上的百分比高度相对于初始包含块。

您可以将浮动到左侧，通过段落元素包装内联文本，并使用margin-left属性对齐文本，而不是在上设置height属性，如下所示：

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

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

WORKING DEMO

- Hashem Qolami