减少链接上的边框

简要说明 - 我需要缩小文本和边框之间的间距。减少链接上的边框

它看起来像什么：

what it looks like

它所需要的样子：

what it needs to look like

HTML -

<div class="navigation"> 
     <ul> 
      <li><a href="#" class="active">Home</a></li> 
      <li><a href="#">Work</a></li> 
      <li><a href="#">About</a></li> 
     </ul> 
    </div>

CSS -

a { font: 36px 'Bebas Neue', Arial, Sans-Serif; color: #fff; text-decoration: none; } 
a:hover { color: #d5a72b; border-top: 3px solid #d5a72b; border-bottom: 3px solid #d5a72b; border-spacing: 0; } 
a.active { color: #d5a72b; border-top: 3px solid #d5a72b; border-bottom: 3px solid #d5a72b; }

来源

2013-03-02 GreenCOT

所以，你需要的不仅仅是边界变小？你需要破折号和另一个li元素。 – 2013-03-02 04:39:28

好吧，我现在要离开联系了，我知道如何做破折号，我只是在这种情况下要求边界。 – GreenCOT 2013-03-02 04:41:03

哦，好的。有我在那里。看起来有一个很好的答案。 – 2013-03-02 04:42:26

您可以用line-height属性做到这一点，与padding。在这种情况下，你需要调整line-height：

line-height: 10px;

演示：http://jsfiddle.net/Y6Dj3/1/

来源

2013-03-02 04:46:10 Blender

+1当然;）我滑倒了脑海。你可以用我的答案做更酷的东西（比如不只是把边界放在顶部和底部），但如果这是你想要的，这完全是矫枉过正。 – 2013-03-02 04:48:22

所以我用这个，少了代码。：P但是，这里发生了什么码 - http://gyazo.com/d233dc4fa8a7f65027ed866476edb39b 结果 - http://gyazo.com/e86c7ea8b6ca49d37919a81ab2844b61 它熄灭页面.... – GreenCOT 2013-03-02 04:57:14

它看起来像你的线高度是一样的东西5px什么的。它需要是顶部和底部边界之间的距离，更像30px。 – 2013-03-02 04:59:07

我不认为你可以减少文字和边框之间的空间。这是一个使用:before和:after伪元素的解决方案。要调整间距，请更改top和bottom值。

See on JSFiddle

a { 
    font: 36px 'Bebas Neue', Arial, Sans-Serif; 
    color: red; 
    text-decoration: none; 
    position:relative; 
} 

a:before, 
a:after { 
    content:""; 
    position:absolute; 
    left:0; 
    right:0; 
    height:4px; 
    background-color:#000; 
} 

a:before { 
    top:2px; 
} 

a:after { 
    bottom:2px; 
}

也是一个方便的技巧，你可以用下面的规则通过CSS改变“家”到“家”：

text-transform:uppercase;

来源

2013-03-02 04:41:40

http://gyazo.com/390be0b613d28041ad4365b5f0fe696e – GreenCOT 2013-03-02 04:48:21

不，我有，但我怎么得到现在设置的边距，我试图做边际：10px 0;把它集中在顶部和底部，但它没有做任何事情。 'A arial，Sans-Serif，'Bebas Neue'，Arial，Sans-Serif; color：#fff; margin：10px 0; text-decoration：none; 位置：相对; }' – GreenCOT 2013-03-02 04:48:51

您需要使用填充来更改'边距'。检查行高是否正确，因为这是一个更简单的需求解决方案。 – 2013-03-02 04:50:04

减少链接上的边框

回答

相关问题