它应该很简单，但我不知道如何。我想要的是.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

相关问题