收縮擬合具有最大寬度的div

Question

我需要縮小擬合父親以適合本身具有最大寬度集的子div。

問題是，一旦孩子的內容溢出到多行，它的寬度被設置爲最大寬度，即使它不需要那麼寬。在這裏，我想讓灰色的外框恰好適合內容。

下面的代碼：

<div class="tags"> 
    <ul> 
     <li>One 
     <li>Two 
     <li>Three 
     <li>Four 
    </ul> 
</div> 

.tags { 
    max-width: 190px; 
    background: #AAA; 
} 

.tags ul { 
    list-style-type: none; 
    padding: 0; 
    text-align: right; 
} 

.tags li { 
    display: inline-block; 
    margin-bottom: 5px; 
    margin-right: 5px; 
    padding: .2em .6em .3em; 
    font-size: 20px; 
    font-weight: bold; 
    line-height: 1; 
    color: #ffffff; 
    text-align: center; 
    border-radius: .25em; 
    background-color: #579cc1; 
} 

我這裏有一個小提琴：

http://jsfiddle.net/yw75kg15/

任何人有一個解決的辦法？

Answer 1

看起來你需要做的只是在li塊中指定一個帶有自動邊距和百分比邊界的寬度。寬度應該可以解決問題。嘗試把它放在你的小提琴中。

.tags li { 
    display: inline-block; 
    width:30%; 
    margin-left: auto; 
    margin-right: 5%; 
    margin-bottom: 5px; 
    padding: .2em .6em .3em; 
    font-size: 20px; 
    font-weight: bold; 
    line-height: 1; 
    color: #ffffff; 
    text-align: center; 
    border-radius: .25em; 
    background-color: #579cc1; 
}