html - CSS 响应式 - Logo 下的线条

Question

在较小的屏幕/移动设备上，我的 Logo 下方/后面出现线条时遇到一些问题。线条和 Logo 之间需要有 x% 的空间，但是当屏幕变小时，线条会位于 Logo 后面。 (您可以尝试更改 fiddle 预览的宽度。)

header {
  max-width: 100%;
  height: 225px;
  background-color: #000;
}
.logo {
  position: relative;
  top: -10px;
}
.line {
  width: 100%;
  height: 2px;
  position: fixed;
  top: 80px;
  text-align: center;
}
.line span {
  display: inline-block;
  position: relative;
  width: 50%;
}
.line span:before,
.line span:after {
  content: "";
  position: absolute;
  height: 3px;
  background-color: #FFF;
}
.line span:before {
  right: 60%;
  width: 80%;
  margin-right: 5%;
}
.line span:after {
  left: 60%;
  width: 80%;
  margin-left: 5%;
}

<header>
  <div class="line">
    <span>
          <a href="#"><img class="logo" src="http://i.imgur.com/cPe20kT.png"></a>
        </span>
  </div>
</header>

查看fiddle

注意:黑色背景只是一个例子，真正的背景不是黑色。

Answer 1

使用flexbox，事情变得简单多了:

1. 移除before和after的absolute定位。

2. 使用 display: flex 而不是 inline-block for .line span

   .line span {
     display: flex;
     justify-content:center;
     margin: 0 5%;
   }
   

   justity-content: center 添加到水平居中。

3. 还为 a 和 .line span 添加了一些边距 - 也许您需要对其进行更多调整？

header {
  max-width: 100%;
  height: 225px;
  background-color: #000;
}
.logo {
  position: relative;
  top: -10px;
}
.line {
  width: 100%;
  height: 2px;
  position: fixed;
  top: 80px;
  text-align: center;
}
.line span {
  display: flex;
  justify-content:center;
  margin: 0 5%;
}
a {
  margin: 0 10px;
}

.line span:before,
.line span:after {
  content: "";
  height: 3px;
  background-color: #FFF;
}
.line span:before {
  width: 80%;
  margin-right: 5%;
}
.line span:after {
  width: 80%;
  margin-left: 5%;
}

<header>
  <div class="line">
    <span>
          <a href="#"><img class="logo" src="http://i.imgur.com/cPe20kT.png"></a>
        </span>
  </div>
</header>