Question

在较小的屏幕/移动设备上，我的徽标下方/后面出现了一些问题。线条和徽标之间需要有x％的空间，但是当屏幕变小时，线条会在徽标后面。（您可以尝试更改小提琴预览的宽度。）

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，事情变得容易多了：

移除absolute和before的{{1}}位置。
after
使用display: flex代替inline-block
```
.line span
```
.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%;
}

CSS响应 - 徽标下的行

1 个答案: