您的位置:首页 > Web前端 > HTML

html居中的元素带有float属性

2015-12-18 11:19 211 查看
float设置浮动和margin设置居中两者本身就存在矛盾

解决办法是

在该元素外加一个div,设置div为居中,再设置该元素为float;



如图,我要设置蓝色背景的div居中,同时我又想让右侧的select框出现在图中位置。

如果设置div为margin:0 auto,则右边的select框出现在了下一行。如果设置div为float,则div元素又不居中了

图中,蓝色背景div宽度200,这个时候我在外面加多了一个div,也就是图中白色背景部分的div

<div style="background:white;margin:0 auto; width:400">
<div style="background:blue;float:left;position:relative;left:100px">
</div>
<div style="float:left;width:100px;margin:0 0 0 100">
<select>
</select>
</div>
</div>


为什么要把白色div的宽度设置成400,因为如果设置成200,蓝色背景的div框会占满整个宽度,这个时候select框就出现在下一行了。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: