border-bottom 的效果疑問
想請問端傳媒網站右側的熱門頭條、編輯推薦 還有下方的延伸閱讀 在標題後面都有出現灰色的底線 ex: https://theinitium.com/article/20160826-dailynews-estonian-ecitizen/ 我用了border-bottom 不過會出現整條底線 (請看我的hw) https://jsfiddle.net/hvoxyecL/10/ 沒辦法像原文網站那樣只出現在標題後面 想問那是怎麼做到的呢？
發問時間：2016-08-27 12:13
阿川先生
54此問題由我Email轉錄至此。得到回答後將轉貼給原發問者 – 阿川先生 12:20
發問注意事項
- 一次問一個問題。多個問題請分多次發問
- 請盡量清楚描述您的問題
- 請描述您做過哪些嘗試、試過哪些方法
- 請盡可能地提供細節，幫回答者節省時間
2 個回答
看了一下，是在熱門頭條、編輯推薦那邊用span標籤包起來
做法
<span class="side">熱門頭條</span>
CSS部份:
span.side{border-bottom:2px solid #fff ;padding:0px 0px 5px 15px;}
修改
div.side_title{ font-weight:bold; display:block; border-bottom:2px solid #dddddd; padding:15px 0px 5px 0px;margin-bottom:20px;}
修改div的原因是你div的內邊距有設定，這樣的話 span的下邊線不會吃掉左右div的內邊距
改用span的內邊距來增加比較好看，解釋的有點爛，希望你看得懂
回答時間：2016-08-27 13:34
Hydra
36新增推文
主要是利用重疊的小技巧，上層蓋住下層的 border，達到設計上的要求。 附上原網頁的上色圖 : https://www.dropbox.com/s/m3m15ppkfurudqp/borderbottom.png?dl=0 實作的部份，就保留給你去嘗試囉。
回答時間：2016-08-28 14:20
Kerwin
24新增推文