子元素寬度如何撐開父元素寬度

• • 代碼
  • 效果如下

一個橫向卷軸框，子元素高度會自動撐開父元素的高度，但是好像子元素寬度不能自動撐開父元素的寬度。這是我們需要使用css使子元素寬度可以自動撐開父元素寬度，避免計算父元素的寬度，用到兩個主要的css的屬性是：（1）橫向滾動布局 white-space: nowrap;（2）内部元素 display: inline-block。

代碼

<style>
        .wrap{width:300px;height:100px;background:#000;overflow: hidden;}
        .box{white-space: nowrap;width:auto;display:inline-block;zoom:1}
        .box span{width:80px;height:100px;background-color: pink;display:inline-block;}
</style>
	/*最外層顯示的盒子*/
    <div class="wrap">
    	/*被子元素自動撐開的盒子*/
        <div class="box">
        	/*子元素*/
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
           

效果如下