2 zaxlctjs zaxlctjs 于 2015.07.12 20:57 提问

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居中后再往左或往右挪吗?

6个回答

showbo
showbo   Ds   Rxr 2015.07.12 21:21
已采纳

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

zaxlctjs
zaxlctjs 回复showbo: 谢了
2 年多之前 回复
zaxlctjs
zaxlctjs 回复showbo: 谢了
2 年多之前 回复
showbo
showbo 回复zaxlctjs: 你需要给居中容器在内置一个容器,内置容器设置margin-left进行偏移<head> <style> .ABC{width:100px; height:100px; background:red; margin:0 auto; } .mgl20{margin-left:20px;width:100px; height:100px;background:blue} </style> </head> <body> <div class="ABC"><div class="mgl20"></div></div> </body> </html>
2 年多之前 回复
zaxlctjs
zaxlctjs 一定要使用相对定位或者绝对定位才能实现div居中后再往左或往右挪吗?
2 年多之前 回复
u010875487
u010875487   2015.07.12 21:08

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

danielinbiti
danielinbiti   Ds   Rxr 2015.07.12 21:17
 margin-left:20px; margin:auto;
 这两个样式是冲突的
 margin:auto的隐含意思就是margin :0px auto;也就是margin-left是0px,你又重新定义margin-left:20px,就覆盖了原来的0px
danielinbiti
danielinbiti   Ds   Rxr 2015.07.12 21:21
 <!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>

danielinbiti
danielinbiti 回复zaxlctjs: 只能说很无语。
2 年多之前 回复
zaxlctjs
zaxlctjs 你好,很感谢你的回答,刚测验了你写的代码,没明白到底什么意思啊,还是很感谢你的回答!thanks!
2 年多之前 回复
zaxlctjs
zaxlctjs   2015.07.12 21:34

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

gy127132060
gy127132060   2015.07.17 09:53

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

Csdn user default icon
上传中...
上传图片
插入图片