上次想照着moe.hao123.com自己寫一個看看,折騰了一下午這個問題,結果剛寫到logo就放棄了,原因就是這個,這次又畫一下午去弄清楚這個。
大多數網站的Logo,圖標和名稱是在一起的。
menu{ display: block; border-bottom: 1px solid rgba(0,0,0,.1); height: 4rem; padding: 0; margin: 0; } .warp{ max-width: 100%; height: 4rem; } .warp a{ color: #7F7F7F; display: inline-block; height: 100%; } .logo{ } .subtitle{ font-size: 2.5rem; } .btn{ margin: 0.688rem; font-size: 1rem; display: inline-block; padding: .5rem 1rem; border-radius: .125rem; border: .1rem solid coral; } .login{ float: right; }
<menu> <div class="warp"> <a href="javascript:console.log('click');"> <img class="logo" src="{{root}}assets/img/xxr.ico" alt="WebSite" width="60" height="60" /> <span class="subtitle">WebSite</span> </a> <span class="btn login">登陸</span> </div> </menu>
顯示效果

b67b4b4e94_999x231.png
img上面有一點空隙,基本是與WebSite的baseline對齊的

cde4fc1477b4d00f.png

8c85afc040b28c25.png
我是如何知道是baseline對齊?當把Website隱藏的時候,我把font-size設為0

a155b093a75674cc.png
解決辦法,我能想到的只有3種黑科技
第一種,相對定位
.logo{ position: relative; top: -7px; }

4cf99cf8e51ef296.png
第二種,絕對定位
.warp a{ color: #7F7F7F; display: inline-block; height: 100%; margin-left: 50px; padding-left: 70px; } .logo{ position: absolute; top: 3px; left: 50px; }

bd81de201c149128.png
margin-left的作用是撐開左邊不需要點擊的

c48a54f6dff96db4.png
第三種,使用float,把基線干掉。
.warp a{ color: #7F7F7F; display: inline-block; height: 4rem; overflow: hidden; zoom: 1; } .logo{ display: block; margin-top: 3px; float: left; } .subtitle{ font-size: 2.5rem; line-height: 4rem; height: 4rem; }
手機上的效果

1cf488d5ed35d041.PNG
后來我又寫了一個demo,這尼瑪到底是Bug還是什么鬼?為什么會出現這么詭異的行為,
最后發現是 foundation的問題
<div class="container"> <div class="img"></div> <span class="t-title">some</span> </div> <style> .container{ height: 60px; margin-top: 20px; background: rgba(0,0,0,.5); border: none; } .img{ width: 60px; height: 60px; display: inline-block; background: red; } .t-title{ display: inline-block; font-size: 3.5rem; } </style>

369ba7924b_1000x659.png
我把代碼復制到其他地方用瀏覽器打開又沒問題,那就說明是foundation庫的問題。日了🐶~

b9d1e6ea0d_1000x659.png
最后做一個總結
這個就是為了解決以下問題
inline-box 與 inline-box之間因為有 inline所以有基線,全是這個基線在作怪。
改變其中一個的padding、margin,基線就變了,其他也會跟着移動。
<div class="container"> <div class="img"></div> <div class="t-title">some</div> </div> <style> .container{ height: 62px; margin-top: 20px; background: rgba(0,0,0,.5); border: none; } .img{ width: 60px; height: 60px; /*padding-top: 20px;*/ margin-top: 20px; display: inline-block; background: red; } .t-title{ display: inline-block; /*margin-top: 20px;*/ font-size: 62px; height: 62px; line-height: 62px; } </style>

fbc63941ad_1000x321.png
關於Line-Height的應用 這里也提供,2個 圖片 文本的垂直居中的例子
<style> body{ padding: 20px; } </style> <style> .box { background: rgba(0,0,0,0.3); line-height: 200px; text-align: center; } .box > img{ vertical-align: middle; } </style> <div class="box"> <img src="{{root}}assets/img/xxr.ico" alt=""> </div> <style> .box-2{ margin-top: 20px; line-height: 40px; text-align: center; background: rgba(0,0,0,0.3); } .box > .text{ display: inline-block; line-height: normal; text-align: left; vertical-align: middle; max-width: 100%; } </style> <div class="box-2"> <h1>雨霖鈴</h1> <div class="text"> 寒蟬凄切,對長亭晚,驟雨初歇。都門帳飲無緒,留戀處,蘭舟催發。執手相看淚眼,竟無語凝噎。念去去,千里煙波,暮靄沉沉楚天闊。 多情自古傷離別,更那堪冷落清秋節!今宵酒醒何處?楊柳岸,曉風殘月。此去經年,應是良辰好景虛設。便縱有千種風情,更與何人說? </div> </div>

4dd6492610_999x681.png
一下午就沒了。好憂傷。