嵌套CSS Div和Span樣式不起作用

Question

我似乎無法理解為什么某些跨度屬性（尤其是“ controller-row-number”和“ controller-row-name”的寬度和文本對齊）：

#controller {
    width: 250px;
    float: left;

    font-size: 14px;
    line-height: 1.5;
    text-align: left;
}

.controller-row {
    background-color: blue;
}

.controller-row-number {
    background-color: yellow;
    width: 60px;
    text-align: right;
    padding: 0 15px 0 0;
}

.controller-row-name {
    background-color: orange;
    width: 150px;
    text-align: left;
    padding: 0 0 0 0;
}

在以下代碼中被忽略：

<div id="controller">
    <div class="controller-row">
        <span class="controller-row-number">1</span>
        <span class="controller-row-name">First Name</span>
    </div>

    <div class="controller-row">
        <span class="controller-row-number">2</span>
        <span class="controller-row-name">Second Name</span>
    </div>
</div>

我在這里有一個JSFiddle：

http://jsfiddle.net/WZFJD

誰能指出我要進行的正確編輯，以便遵循樣式？

謝謝！

Answer 1

display: inline-block; 搶救！

小提琴

.controller-row-number {
    background-color: yellow;
    width: 60px;
    display: inline-block;
    text-align: right;
    padding: 0 15px 0 0;
}

.controller-row-name {
    background-color: orange;
    width: 150px;
    display: inline-block;
    text-align: left;
    padding: 0 0 0 0;
}

span元素默認情況下是內聯的，因此您必須使其成為塊狀；如果要應用寬度規則，則必須使其成為行內塊狀，否則它們僅占用足夠的寬度即可容納。 顯示的寬度和高度display: inline; elems無法像您嘗試的那樣設置。 您可以使用line-height偽造line-height 。

Answer 2

默認情況下，跨度顯示為inline ，如果要指定寬度，則必須設置display: inline-block 。

Answer 3

width不能應用於<span>類的inline元素。 您還必須設置類的controller-row-number和controller-row-name樣式才能display: inline-block