Question

我有2个元素共享同一个班级.cta。 .casino-box内的CTA看起来很棒，但.header-box内的CTA占.top-nav-bar和.nav-bar占用的空间的165px。

如何让顶级CTA忽略这两个导航栏的间距，而不必拆分CTA的css代码？

.cta {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  top: 50%;
  margin-top: -80px;
}

.cta h1 {
  color: #fff;
  weight: 500;
  text-shadow: 0px 0px 4px black;
}

.cta .button {
  color: #fff;
  border-color: #fff;
  font-weight: bold;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.7);
  text-shadow: 0px 0px 4px black;
}
.cta .button:hover {
  color: #90281F;
  background: #fff;
  text-shadow: none;
}

.cta hr {
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.7);
}

Answer 1

您必须设置负margin-top，其高度为.top-nav-bar and .nav-bar加上您的正常边距，这样两个div可以在中心对齐。在这种情况下，它可能如下：

.header-box .cta {
   margin-top: -205px;
}

元素之前可以忽略属性的高度值吗？

1 个答案: