qq_34086980
Armouy
采纳率0%
2017-04-15 13:31 阅读 788

关于CSS样式的一个问题

写了一个导航栏,
一个div包含一个ul

css样式如下:
ul {margin:0; padding:0;}

.daohangdiv{
border:1px #000 solid;
margin:10px auto;
width:1000px;
height:50px;
position:relative;
text-align: center;

}
.daohangul{
list-style: none;
margin:10px auto;
}
.daohangul li{
border-left:1px solid #000;
display:inline;
padding-left:10px;
padding-right: 10px;
}
图片说明

当我突然把div的border去掉之后
图片说明

于是我修改了ul中margin的值,无论怎么修改,都修改不了ul在div中的位置,他只会让div移动。
ul修改margin不是相对包含他的div移动么,为什么它是相对上面的div移动?
图片说明

求解,谢谢!!!

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

2条回答 默认 最新

  • github_38340501 ChasenH 2017-04-15 16:27

    外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。
    合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

    通俗讲就是子元素的margin-top会影响父元素。

    解决办法:
    1、可以改为父元素用padding-top值。
    2、父元素设置 overflow:hidden;(我比较常用)
    3、父元素或者子元素声明浮动(float:left;可用)
    4、父元素添加border(border:1px solid transparent可用)
    5、父元素或者子元素声明绝对定位

    点赞 1 评论 复制链接分享
  • iioioioioioio iioioioioioio 2017-04-15 15:05

    看不到你页面对应的html代码是不好说明的,你看看是不是你那张图片的DIV太高了

    点赞 评论 复制链接分享

相关推荐