4-5编程？元素居中的冲突问题

1

2

3

4

5

6

7

*{margin:0;padding:0;list-style-type:none;}
div.big{text-align:center;}
h3{background:#dbdbdb;padding:8px;border:thin solid #BDC4DE;margin-left:30%;margin-right:30%;}
ul{display:none;}
.div1:hover ul{display:block;}
.div2:hover ul{display:block;}
.div3:hover ul{display:block;}

这是我最先写的代码，后来发现不论给哪里（ul或相对应的class值）添加border属性，弹出的列表都没有边框。

当改变h3的属性定义之后，即：

1 2	`h3{width:100px;border:1px` `solid` `pink;}` `ul{display:none;width:100px;border:1px` `solid` `pink;}`

结果又不居中显示

但是加上“margin:quto;"之后，又可以居中显示。这是为何？

1 2	`h3{width:100px;border:1px` `solid` `pink;margin:auto}` `ul{display:none;width:100px;border:1px` `solid` `pink;margin:auto;}`

a1376743421 2018-05-03

源自：盒子模型 4-7 编程练习

21

收起

3回答

小于飞飞回答被采纳获得+3积分 2018-05-03 16:06:45

替换第二段代码后，外侧和里层的div 没有设置宽度，所以默认充满整个容器。text-align 只是对文字进行居中，所以没有实现整体居中，里面h3 和 ul 设置了宽度，设置了margin值后，使其针对父元素居中，希望解答你的疑惑，欢迎采纳，加油！

a1376743421 提问者 #1

大概~略略微微~可可能能的稍稍微微了解了

2018-05-03 20:59:10

提问者 a1376743421 2018-05-03 15:25:34

补充：最先的那段代码，补充border属性后可以显示边框。问题就是下面那两段代码，关于margin的问题

小于飞飞 2018-05-03 15:25:29

第一个问题，外层添加固定宽度，给ul 添加相应的边框，可以实现二级菜单有边框：

第二个问题，如果居中，外层div设置宽度同时设置margin：

主要原因是因为没有具体宽度，默认充满整个页面，在思考下，动手实践，加油！

提问者 a1376743421 #1

那既然div默认充满整个页面，且text-align:center;（内容针对元素居中），为何不居中现实

2018-05-03 15:33:22

相似问题

为什么他这样能让元素垂直居中呢？

ThreadLocal类为什么会存在冲突？具体讲下吗

删除数组元素

老师想问一下给父元素text-align居中后，它的子元素的子元素里的图片也是居中效果？

关于元素居中问题?

登录后可查看更多问答，登录/注册

前端小白入门系列课程

参与学习人
提交作业 11218 份
解答问题 36712 个

从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！

本课精华内容

问答作业

为什么我的没有框

5 45

表格的问题

377 41

大家好,body前面有一个红色的小××，麻烦大家帮我看看

378 40

到底是cellspacing还是cellpacing?

0 35

课间活动的表格怎么实现，想了很久也想不出来

60 30

查看更多本课问答

请稍等 ...

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

扫描二维码
关注慕课网微信公众号