CSS 响应式 - 徽标下的线条

Question

我在较小的 screens/mobile 设备上使用 under/behind 我的徽标时遇到一些问题。线条和徽标之间需要 space 的 x%，但是当屏幕变小时，线条会位于徽标后面。（您可以尝试更改 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 事情变得简单多了：

去掉before和after的absolute定位。
对 .line span
使用 display: flex 而不是 inline-block
```
.line span {
  display: flex;
  justify-content:center;
  margin: 0 5%;
}
```
justity-content: center 添加到水平居中。
还为 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>

CSS 响应式 - 徽标下的线条

CSS responsive - Lines under logo

html

css

responsive