HTML/CSS - 自動尺寸的內容在一個包裝

Question

寬度我有內容的可變長度內容股利，水平。 我想這取決於它的內容長度喜歡這個內容的div來自動調整大小寬度。例如，我希望能夠刪除任意的「20％」值，並相應地設置div大小。目前從寬度中移除20％的值會迫使其重新調整到其容器的100％。我錯過了什麼CSS？

Fiddle

.wrapper { 
 
    border: 2px solid green; 
 
} 
 
.content { 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    border: 2px solid orange; 
 
    width: 20%; 
 
}

<div class="wrapper"> 
 
    <div class="content"> 
 
    <span>One</span> 
 
    <span>Two</span> 
 
    <span>Three</span> 
 
    <span>Four</span> 
 
    </div> 
 
</div>

Answer 1

將text-align:center在包裝並設置內容div的顯示內聯或內聯塊：

.wrapper { 
 
    border: 2px solid green; 
 
    text-align:center; 
 
} 
 
.content { 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    border: 2px solid orange; 
 
    display: inline; 
 
}

<div class="wrapper"> 
 
    <div class="content"> 
 
    <span>One</span> 
 
    <span>Two</span> 
 
    <span>Three</span> 
 
    <span>Four</span> 
 
    </div> 
 
</div>

Answer 2

如果你想流體伸縮動作我建議Flexbox的：

.wrapper { 
 
    border: 2px solid green; 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 
.content { 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    border: 2px solid orange; 
 
    /*width: 20%;*/ 
 
}

<div class="wrapper"> 
 
    <div class="content"> 
 
    <span>One</span> 
 
    <span>Two</span> 
 
    <span>Three</span> 
 
    <span>Four</span> 
 
    </div> 
 
</div>

在線：

Flexbox的：