CSS是網頁設計中不可缺少的一部分，在網頁布局中可以使用各種方式來定義元素的寬度，

包括百分比、像素、em等單位。

在實際應用中，我們經常會遇到一些內容不確定寬度的情況，如何讓元素的寬度跟隨內容的大小而自動調整呢？

這時，我們可以使用CSS的一個特殊屬性——

display: inline-block;。

通過設置元素的display屬性為inline-block，可以使元素在不設置寬度的情況下，根據內容確定寬度，實現自適應布局。

/* CSS代碼示例 */
div {
display: inline-block;
}

需要注意的是，如果使用了inline-block，我們需要考慮到元素之間可能存在的空格和回車等內容，這些都會影響元素的實際寬度，導致布局不符合預期。

因此，我們可以采用以下兩種方式來解決問題：

一、

將元素之間的空格或回車刪除或注釋掉，這樣可以避免多余的寬度計算。

/* CSS代碼示例 */
Item1
Item2
Item3

二、

通過CSS樣式消除空格的影響。例如：

/* CSS代碼示例 */
div {
display: inline-block;
font-size: 0;
}
div span {
display: inline-block;
font-size: 14px;
}

以上代碼中，設置了div的字體大小為0，消除了空格對寬度的影響，同時在內部元素span上重新設置字體大小，恢復了原本的文本大小。

總結一下，使用display: inline-block屬性可以使元素的寬度根據內容自適應，但需要注意元素之間可能存在的空格和回車等內容對寬度的影響。