Question

此代码非常适合将导航向右对齐，但是当我尝试居中并给顶部留出一些余量时，图像与导航一起移动。如何解决这个问题？

Object {id: 1004, message: "Testing123", messageDate: "Today", causeId: "d5a93ae4-f248-439a-9425-8be7746591fc", $$hashKey: "object:15"}
$$hashKey
:
"object:15"
causeId
:
"d5a93ae4-f248-439a-9425-8be7746591fc"
id
:
1004
message
:
"Testing123"
messageDate
:
"Today"

我想将主导航中心并给予保证金：60px而不给背景图像留出余量。

Answer 1

这称为保证金崩溃 - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

如果没有边框，填充，内联内容，block_formatting_context创建或间隙将块的边距顶部与其第一个子块的边距顶部分开，或者没有边框，填充，内联内容，高度，分钟-height或max-height将块的边距底部与其最后一个子节点的边缘底部分开，然后这些边距会崩溃。折叠的保证金最终在父母之外。

您可以使用任何这些方法修复它。在这种情况下，我只需在header的顶部添加填充，而不是.main-nav上的上边距

＆＃13;

* {
  margin: 0;
  padding: 0;
}

.row {
  max-width: 1140px;
  margin: 0 auto;
}

header {
  background-image: url(http://cdn.thedailybeast.com/content/dailybeast/articles/2015/03/31/neil-degrasse-tyson-defends-scientology-and-the-bush-administration-s-science-record/jcr:content/image.img.2000.jpg/1432067001553.cached.jpg);
  background-size: cover;
  background-position: center;
  height: 100vh;
  background-attachment: fixed;
  padding-top: 60px;
}

.main-nav {
  list-style: none;
  text-align: center;
}

.main-nav li {
  display: inline-block;
  margin-left: 40px;
}

＆＃13;

<header>
    <nav>
        <div class="row">
            <ul class="main-nav">
                <li><a href="#">About</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">About</a></li>
            </ul>
        </div>
    </nav>
</header>

＆＃13;

如何在修复图像的顶部居中导航？

1 个答案: