导航栏中浮动元素的折叠边距

提问者：小点点

有一个导航栏。它的示意图如下:

<- LEFT        RIGHT ->

CSS:

<div style="margin-top: 25px">
  <div style="float: left">LEFT</div>
  <div style="float: right">RIGHT</div>
</div>

如果两个导航元素都在同一条线上，则可以正常工作。现在如果屏幕太窄，browser会重新排列它:

<- LEFT
     RIGHT ->

而且两个元素都变得太接近彼此（垂直）。引入margin-top解决了后一种情况的问题:

<div style="margin-top: 35px">
  <div style="float: left">LEFT</div>
  <div style="float: right; margin-top: 15px">RIGHT</div>
</div>

但它为前者创造了一个额外的空间:

| 25px  <<  outer margin
| 15px  <<  inner margin

<- LEFT        RIGHT ->

Q.如何使这两种情况都有效？

总结:

共2个答案

匿名用户

您可以尝试使用flex-box作为包装您的导航的div:

<div style={display: flex, flex-flow: row wrap}>
//nav items in here
</div>

这指定您的nav项目总是布局在一行上，如果屏幕尺寸较小，它会自动包装项目

匿名用户

来自MDN:

块的顶部和底部边距有时被合并（折叠）成单个边距，其大小是单个边距中最大的（如果它们相等，则仅为其中之一），这种行为称为边距折叠。请注意，浮动和绝对定位元素的边距永远不会折叠。

我认为您应该定义一个媒体查询，以便在需要时添加顶部边距（例如:在小屏幕上）。

假设您为正确div指定了一个id“right-nav”，下面是演示代码:

@media only screen and (max-width: 600px) {
  #right-nav {
    margin-top: 15px
  }
}