[問題] 製作網頁導覽列時排版的問題

作者: lueichun (no anonymous)   2016-11-10 00:20:44
我想要仿製以下網頁開頭的導覽列:
https://theinitium.com/article/20161030-dailynews-south-korea-president/
網頁開頭的導覽列的超連結 他的底線不是傳統的 利用text-decoration來設置
而是用超連結元素本身的border-bottom來設置
滑鼠只要hover到超連結 border-bottom就會顯示在導覽列中央的水平線上
我的問題就出在這邊
以下是我的code:
https://jsfiddle.net/ajd16f2a/3/
一開始我先設定兩個ul 兩個ul都有border 用來產生兩個ul之間的水平線
然後我設定li的margin為15px 讓超連結跟下方的水平線有間隔
接著我在li內增加超連結 並對超連結設定border-bottom 取代傳統的底線
並在css欄位內設定超連結在被滑鼠hover時 底線要出現在水平線的邊緣
然後問題就來了
現在有兩個ul 我設定上方的ul內的超連結的padding為15px
這樣可以剛好讓該超連結的border-bottom貼在水平線上方
但下方的ul內的超連結 其padding我一樣設為15px
但是這個超連結的border-top卻會剛好跟水平線重疊
所以我才將超連結的paddding改為13px 要這樣才能做出跟原始網頁相同的效果
但我不能理解
為何上下li的margin都設為15px
超連結的padding也都設為15px 上下兩邊呈顯的效果會不同
如果有錯 要如何修改才能使padding相同 且上下兩邊超連結底線的效果相同呢
作者: akccakcctw (947)   2016-11-10 09:38:00
下面的ul加vertical-align:bottom就可以了
作者: kevinkung (Jaguar)   2016-11-10 11:35:00
在於上下交界處的問題,推樓上解法!!

Links booklink

Contact Us: admin [ a t ] ucptt.com