html 如何让几个div水平居中一行
使用浮动float即可实现,代码实例如下:
<html>
<meta charset="utf-8">
<body>
<style type="text/css">
.div1{width: 100px; height: 100; background: red; float: left;}
.div2{width: 100px; height: 100; background: yellow; float: left;}
.div3{width: 100px; height: 100; background: green; float: left;}
</style>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
效果如下:
用列表方式处理 设置div 的float属性;margin:o auto 可以达到居中效果
<div style="width:700px;margin:0 auto;">
<ul style="margin:0 auto;list-style:none;">
<li><div style="border:solid 1px white;height:50px;width:200px;background-color:lightblue;float:left;"></div></li>
<li><div style="border:solid 1px white;height:50px;width:200px;background-color:lightblue;float:left;"></div></li>
<li><div style="border:solid 1px white;height:50px;width:200px;background-color:lightblue;float:left;"></div></li>
</ul>
</div>
第二个,给这些div的父类设置样式display:inline;
这样就可以了。