減少鏈接上的邊框

簡要說明 - 我需要縮小文本和邊框之間的間距。減少鏈接上的邊框

它看起來像什麼：

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

減少鏈接上的邊框

回答

相關問題