嵌套CSS Div和跨度樣式不工作

我似乎無法理解爲什麼某些跨度屬性（特別是「controller-row-number」和「controller-row-name」的寬度和文本對齊）：嵌套CSS Div和跨度樣式不工作

#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

任何人都可以指出我做出的正確編輯，以便風格得到遵守嗎？

謝謝！

來源

2014-04-22 Berklie

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元素是默認串聯，所以你必須讓他們塊，或內聯塊，如果你需要應用的寬度規則，否則他們只是採取了足夠的寬度以適應。 display: inline; elems的寬度和高度不能像您試圖設置的那樣設置。你可以使用line-height來僞造身高。

來源

2014-04-22 22:52:01 dezman

作爲一個額外的解釋：''是包含文本的內聯元素，因此不能給予高度或寬度和其他一些造型你用於div。 'display：inline-block'修復了這個問題。 –

太棒了...非常感謝這個例子和解釋！ – Berklie

@Berklie沒問題，謝謝你，祝你好運！ – dezman

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

來源

2014-04-22 22:52:16 Nit

width不能應用於inline元素，如<span>。你將不得不也風格你controller-row-number類和controller-row-name的跨度爲display: inline-block

來源

2014-04-22 22:52:55

嵌套CSS Div和跨度樣式不工作

回答

相關問題