[問題] 製作網頁導覽列時排版的問題消失
我想要仿製以下網頁開頭的導覽列：
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相同 且上下兩邊超連結底線的效果相同呢
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 118.160.81.136
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1478708449.A.AAA.html
推
11/10 09:38, , 1F
11/10 09:38, 1F
推
11/10 11:35, , 2F
11/10 11:35, 2F