css - 嵌套的 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; 拯救!

Fiddle

.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 元素在默认情况下是内联的，因此如果您希望应用宽度规则，则必须将它们设置为 block 状或 inline-block 状，否则它们只会占用足够的宽度来适应。 display: inline; 元素的宽度和高度无法像您尝试的那样设置。你可以使用 line-height 伪造高度。