【HTML-進階-如何實現父級塊級元素寬度自適應子元素寬度】

背景

塊級元素寬度默認值為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;
}