它應該很簡單，但我不知道如何。我想要的是.current類爲導航菜單中的當前列表項添加邊框。如何在頂部放置邊框？

我已經這樣做了（參見例如：http://codepen.io/anon/pen/jARqOr）但我想有邊界在此IMAG（紅色邊框）對準頭部的頂部，如：

我該怎麼做才能得到這個結果？

期待您的回覆。

感謝。

來源

2016-08-18 Caspert

你的意思2個邊界？在你的形象中，我看到一個厚厚的黑色邊框和一個薄薄的紅色邊框。或者你的意思是這個嗎？：http://codepen.io/anon/pen/KrYzNm – Mojtaba

對不起，誤會。只有紅色的邊框。黑色是Photoshop .. – Caspert

需要一個**最小**演示...你的Codepen中有太多的CSS。 –

我不知道這是否是最好的解決，但這個工作：

ul li a.current { 
    padding-top: 50px; 
    margin-top: -55px; 
}

設置邊距來-55px（頭的填充的負值）花費頂端，然後添加一個50px（55px - 5px爲邊框）的填充頂部可以使文本與其他錨點元素保持一致。

此解決方案的一個問題是.current錨點上方的所有空間都是可點擊區域的一部分。

來源

2016-08-18 20:34:58 jhdoak

感謝您的解決方案，是的，這確實是不幸的。有沒有解決方案？ – Caspert

這裏可能有解決方案，但目前我沒有注意到。希望別人能提供一些意見。 – jhdoak

你可以嘗試這樣的事：

ul .current a { 
    padding-top: 42px; 
    background: linear-gradient(to bottom, #005f37 0%,#005f37 100%); 
    background-size: 100% 7px; 
    background-repeat: no-repeat; 
    color: #006038; 
}

它爲我

來源

2016-08-18 20:40:56 RubyDigger19

我還沒有看到你的評論

黑色的Photoshop

反正這個代碼只是使用CSS 。

see output you want just using CSS

- CSS -

ul li a.current { 
      border-top: 4px solid #000; 
      /*box-shadow: 0px -5px 0px black;*/ 
      padding :0px 5px 5px 5px; 
      color: red!important; 
    } 

    ul li a.current span { 
      padding:5px 0px ; 
      border-top: 2px solid red; 
      /*box-shadow: 0px -2px 0px red;*/ 

    }

---同樣大小的雙邊框則使用這個CSS代替

ul li a.current { 
     box-shadow: 0px -5px 0px black, /* add as many as you want */ 
     inset 0px 2px 0px red; 
     padding:5px; 
     color: red!important; 
    }

來源

2016-08-18 22:56:24 monikapatel

如何在頂部放置邊框？

回答

黑色的Photoshop

相關問題