使子元素具有與父元素相同的寬度和邊框

Question

例如，我有一個「li」標籤，裏面有一個「a」標籤。我希望整行有一個邊框底部：1px固體#ccc;

<li class=sub"> 
    <a href="3" class="active"> 
     <span id="1">Text</span> 
    </a> 
</li> 

目前我有

span { 
    width: 90%; 
    border-bottom: 1px solid #ccc; 
    font-size:12px; 
} 

li { 
    width: 100%; 
} 

但似乎只有文本將得到強調，我希望整個「禮」這需要像要強調一整排。但不是強調「li」而是「span」標籤。所以基本上會希望我的「span」標籤與父母「li」相同的寬度不知道我在CSS上丟失了什麼。

Answer 1

你必須明白，span是一個內聯元素，併爲這樣的事，沒有這樣的事情width，使span繼承的寬度，你需要確保你設置的display到block元素，在你的情況下，請嘗試inline-block。

現場示例：http://jsbin.com/liwah/1/edit?html,css,output