问题描述

CSS关于div布局的小问题,请教了,谢谢

<head>
<style>
.ABC{width:100px; height:100px; background:red; margin:auto; margin-left:20px;}
</style>
</head>
<body>
<div class="ABC"></div>
</body>
</html>

为什么居中了之后不能再向左挪20px?
为什么顺序改了就提示代码错误啊?
.ABC{width:100px; height:100px; background:red; margin-left:20px; margin:auto;}
一定要使用相对定位或者绝对定位才能实现div居中后再往左或往右挪吗?

解决方案

居中是margin:0px auto，你单独设置margin-left就是最后的margin-left有效果了，覆盖了margin:0px auto中的margin-left当然无法居中。

解决方案二：

可以呀，你用的什么浏览器呢？我这边显示正常，或者你这的加一下：margin-left：20px !important

解决方案三：

 margin-left:20px; margin:auto;
 这两个样式是冲突的
 margin:auto的隐含意思就是margin :0px auto;也就是margin-left是0px，你又重新定义margin-left:20px，就覆盖了原来的0px

解决方案四：

 <!DOCTYPE html>
<html>
<head>
<style>
.ABC{width:140px; height:100px; background:red; margin-left:20px; margin:auto;}
.CDE{width:100px; height:100px; background:blue; position:relative;left:0px;}  /*用相对位置，外层放大，内存用实际间距。*/
</style>
</head>
<body>
<div class="ABC">
<div class="CDE">实际的div</div>
</div>
</body>
</html>
</html>

解决方案五：

一定要使用相对定位或者绝对定位才能实现div居中后再往左或往右挪吗?

解决方案六：

居中后左挪，，，就是定位后再移动了。。。。不然就是脚步控制，，，我想楼主更不愿意。。。。。