今天模仿淘宝网站的时候,用到了inline-block布局,但明明计算好了子元素的宽度却发现不能在一行上。
<div class="w bgwh">
<div class="belt">
<h3 class="belth"><a href="#" class="lh24 di"><img src="img/beltT.png" class="fl di"></a><p class="h24 g9 ">发现属于你的生活方式</p></h3>
<div class="beltc">
<a href="#" class="belt_list beltlist1 dib">
<img src="img/belt_listr.jpg" class="fl">
<div class="belt_listr">
<h4 class="db h24 mt6 f16 g3">男神style</h4>
<p class="lh22 f14 g9 ">妹纸收割机</p>
<p class="belt_listrBp lh30 g9 f12"><i class=""></i>人气6942012</p>
</div>
</a>
<a href="#" class="belt_list beltlist1 dib">
<img src="img/belt_listr.jpg" class="fl">
<div class="belt_listr">
<h4 class="db h24 mt6 f16 g3">男神style</h4>
<p class="lh22 f14 g9 ">妹纸收割机</p>
<p class="belt_listrBp lh30 g9 f12"><i class=""></i>人气6942012</p>
</div>
</a>
<a href="#" class="belt_list beltlist1 dib">
<img src="img/belt_listr.jpg" class="fl">
<div class="belt_listr">
<h4 class="db h24 mt6 f16 g3">男神style</h4>
<p class="lh22 f14 g9 ">妹纸收割机</p>
<p class="belt_listrBp lh30 g9 f12"><i class=""></i>人气6942012</p>
</div>
</a>
<a href="#" class="belt_list beltlist1 dib">
<img src="img/belt_listr.jpg" class="fl">
<div class="belt_listr">
<h4 class="db h24 mt6 f16 g3">男神style</h4>
<p class="lh22 f14 g9 ">妹纸收割机</p>
<p class="belt_listrBp lh30 g9 f12"><i class=""></i>人气6942012</p>
</div>
</a>
<a href="#" class="belt_list beltlist1 dib">
<img src="img/belt_listr.jpg" class="fl">
<div class="belt_listr">
<h4 class="db h24 mt6 f16 g3">男神style</h4>
<p class="lh22 f14 g9 ">妹纸收割机</p>
<p class="belt_listrBp lh30 g9 f12"><i class=""></i>人气6942012</p>
</div>
</a>
<a href="#" class="belt_list beltlist1 dib">
<img src="img/belt_listr.jpg" class="fl">
<div class="belt_listr">
<h4 class="db h24 mt6 f16 g3">男神style</h4>
<p class="lh22 f14 g9 ">妹纸收割机</p>
<p class="belt_listrBp lh30 g9 f12"><i class=""></i>人气6942012</p>
</div>
</a>
</div>
</div>
</div>
最后一个列表项目总是出现在下一行,最后设置了容器总宽度才保持一行。因此使用此种布局时一定要设置容器和列表项的宽度。