背景

块级元素宽度默认值为100%，而不是auto;因此其宽度不会根据子元素内容动态适应。
如何实现父级元素宽度动态适应其子元素。

方法一 display:inline;

给块级元素设置inline-block值。

{ ???display: inline-block;}

方法二 绝对定位元素

给块级元素设置position：absolute/fixed;

{ position:absolute; // fixed}

方法三 浮动元素

{ ???float: left;// right}

方法四 display:flex

//html<div class="test"> ???hello,我是测试文字君。</div>.test{ ???display:flex;}

【HTML-进阶-如何实现div宽度由子元素决定】

原文地址：https://www.cnblogs.com/wanxiong/p/css-width-based-on-children.html