父div要跟隨孩子的高度 - 對於沒有浮動的孩子

Question

我可以找到我的問題的唯一答案是明確的浮動 - 但我沒有。所以希望你可以幫助另一個答案:-)

這是我的代碼，我試圖讓按鈕的父div跟隨由填充完成的擴展。

<div class="button"> 
    <a href="#">add</a> 
</div> 

和CSS

.button { 
    background-color: #ccc; } 
.button a { 
background-color: #96BD1E; 
color: black; 
font-size: large; 
padding: 6px 12px; 
width: 120px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
-opera-border-radius: 5px; 
-khtml-border-radius: 5px; 
border-radius: 5px; 
height: 59px; 
margin: 10px; 
border-top-left-radius: 5px 5px; 
border-top-right-radius: 5px 5px; 
border-bottom-right-radius: 5px 5px; 
border-bottom-left-radius: 5px 5px; 
    clear: both; 
} 

這裏是它的一個例子與http://jsfiddle.net/zNLVZ/1/

Answer 1

玩

你的CSS改成這樣：

.button { 
background-color: #ccc; 
} 
.button a { 
display:inline-block; 
background-color: #96BD1E; 
color: black; 
font-size: large; 
padding: 6px 12px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
-opera-border-radius: 5px; 
-khtml-border-radius: 5px; 
border-radius: 5px; 
margin: 10px; 
border-top-left-radius: 5px 5px; 
border-top-right-radius: 5px 5px; 
border-bottom-right-radius: 5px 5px; 
border-bottom-left-radius: 5px 5px; 
    clear: both; 
}