如何在顶部定位边框？

Question

应该很简单，但我不知道怎么做。我想要的是.current类为导航菜单中的当前列表项添加边框。

我已经这样做了（参见示例：http://codepen.io/anon/pen/jARqOr） 但是我想让边框与标题的顶部对齐，就像在这个图像（红色边框）中一样：

我该怎么做才能得到这个结果？

期待您的回复。

感谢。

Answer 1

我不确定这是否是最佳解决方案，但这有效：

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

将margin-top设置为-55px（标题填充的负值）将其置于顶部，然后添加50px的填充顶部（55px - 5px用于边框）使文本向下和其他锚元素一样。

此解决方案的一个问题是.current锚点上方的所有空间都是可点击区域的一部分。

Answer 2

您可以尝试这样的事情：

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;
}

它对我有用

Answer 3

我没有看到你的评论

黑色是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;
    }