Bootstrap

inline-block布局列表项元素不在一行的问题

今天模仿淘宝网站的时候,用到了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>
最后一个列表项目总是出现在下一行,最后设置了容器总宽度才保持一行。因此使用此种布局时一定要设置容器和列表项的宽度。

;