html-link的位置不能正確顯示

我想正確顯示鏈接。這裏的問題是，鏈接前等環節，不能正確地看..html-link的位置不能正確顯示

這裏是我的代碼：

<html> 
    <head> 
     <style> 
      .btn3Link { 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
    border: solid 1px #20538D; 
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4); 
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); 
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); 
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); 
    background: #4479BA; 
    color: #FFF; 
    padding: 8px 12px; 
    text-decoration: none; 
}</style> 
     <style>.btn3Link {padding: 10px 15px;background: #4479BA;color: #FFF;}.btn3Link:hover, .btn3Link:focus {background: #356094;border: solid 1px #2A4E77;text-decoration: none;}</style> 
    </head> 
    <body> 
     <a class="btn3Link" href="dsds">test</a> <a class="btn3Link" href="dsds">test</a> <a class="btn3Link" href="dsds">test</a> <a class="btn3Link" href="dsds">test</a> <a class="btn3Link" href="dsds">test</a> <a class="btn3Link" href="dsds">test</a> <a class="btn3Link" href="dsds">test</a> <a class="btn3Link" href="dsds">test</a> <a class="btn3Link" href="dsds">test</a> 
     <a class="btn3Link" href="dsds">test</a> <a class="btn3Link" href="dsds">test</a> <a class="btn3Link" href="dsds">test</a> <a class="btn3Link" href="dsds">test</a> <a class="btn3Link" href="dsds">test</a> <a class="btn3Link" href="dsds">test</a> <a class="btn3Link" href="dsds">test</a> <a class="btn3Link" href="dsds">test</a> <a class="btn3Link" href="dsds">test</a> 
     <a class="btn3Link" href="dsds">test</a> <a class="btn3Link" href="dsds">test</a> <a class="btn3Link" href="dsds">test</a> <a class="btn3Link" href="dsds">test</a> <a class="btn3Link" href="dsds">test</a> <a class="btn3Link" href="dsds">test</a> <a class="btn3Link" href="dsds">test</a> <a class="btn3Link" href="dsds">test</a> <a class="btn3Link" href="dsds">test</a> 
     </body> 
</html>

來源

2015-12-17 sarzin

你忘了給display: inline-block：

.btn3Link {display: inline-block;}

行內元素無法在頂部和底部處理padding和margin，所以它們會與基線重疊或對齊。給他們display: inline-block，給他們既是內聯，也具有塊級屬性的能力。

片段

.btn3Link { 
 
    -webkit-border-radius: 4px; 
 
    -moz-border-radius: 4px; 
 
    border-radius: 4px; 
 
    border: solid 1px #20538D; 
 
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4); 
 
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); 
 
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); 
 
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); 
 
    background: #4479BA; 
 
    color: #FFF; 
 
    padding: 8px 12px; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
}

<a class="btn3Link" href="dsds">test</a> <a class="btn3Link" href="dsds">test</a> <a class="btn3Link" href="dsds">test</a> <a class="btn3Link" href="dsds">test</a> <a class="btn3Link" href="dsds">test</a> <a class="btn3Link" href="dsds">test</a> <a class="btn3Link" href="dsds">test</a> <a class="btn3Link" href="dsds">test</a> <a class="btn3Link" href="dsds">test</a> 
 
<a class="btn3Link" href="dsds">test</a> <a class="btn3Link" href="dsds">test</a> <a class="btn3Link" href="dsds">test</a> <a class="btn3Link" href="dsds">test</a> <a class="btn3Link" href="dsds">test</a> <a class="btn3Link" href="dsds">test</a> <a class="btn3Link" href="dsds">test</a> <a class="btn3Link" href="dsds">test</a> <a class="btn3Link" href="dsds">test</a> 
 
<a class="btn3Link" href="dsds">test</a> <a class="btn3Link" href="dsds">test</a> <a class="btn3Link" href="dsds">test</a> <a class="btn3Link" href="dsds">test</a> <a class="btn3Link" href="dsds">test</a> <a class="btn3Link" href="dsds">test</a> <a class="btn3Link" href="dsds">test</a> <a class="btn3Link" href="dsds">test</a> <a class="btn3Link" href="dsds">test</a>

預覽

來源

2015-12-17 12:43:43

謝謝，但還是鏈接「堅持」從上下 – sarzin

@sarzin添加'瑪格in：5px 0;' –

謝謝，這是工作:) – sarzin

html-link的位置不能正確顯示

回答

相關問題