CSS敏感 - 徽標下的線條

-1

我在小屏幕/移動設備上的徽標下方/後面出現了一些線條問題。線條和徽標之間需要有x％的空間，但是當屏幕變小時，線條會落在徽標後面。（你可以試着改變小提琴預覽的寬度）上fiddle CSS敏感 - 徽標下的線條

注意

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>

觀點：黑色背景只是一個例子，真正的背景是不是黑色。

來源

2016-09-30 Jon Holm

一些次'X％'甚至會導致一些問題作出響應..我將分享你這樣做的另一種方式:) –

「的間距X％線條和標誌「。 x％的空間是多少？它是標誌寬度，屏幕寬度還是線寬的百分比？你的百分比值必須是「某種東西」才能在邏輯上起作用，並且在知道這些信息之前，難以提供適當的解決方案。 –

使用flexbox和事情變得非常簡單：

取出absolute定位before和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%; 
 
}

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

來源

2016-09-30 17:48:34 kukkuz

CSS敏感 - 徽標下的線條

回答

相關問題