每隔一個按鈕之間的間距不均勻

我有一組按鈕（用<a></a>或button製作的效果是一樣的）都是inline-block元素。每隔一個按鈕之間的間距不均勻

當我把它們中的許多內聯，他們之間的間距是不均勻的。其他每個按鈕都有不同的間距。

請注意，我不想刪除按鈕之間的空間，我希望它是平坦的。

第一個和第二個按鈕之間的差異約爲1px，但第二個和第三個按鈕的間距似乎爲2px。模式然後繼續。我將黑色和箭頭放在匹配的間距上，以便看到圖案。

CSS

.btn, 
button, 
input[type='button'], 
input[type='reset'], 
input[type='submit'] { 
    @include transitions; 
    display: inline-block; 
    overflow: visible; 
    margin: ($baseline/2) 0; 
    padding: .6em 2em; 
    background: $default; 
    color: #fff; 
    text-decoration: none; 
    vertical-align: top; 
    -webkit-appearance: none; 
    outline: none; 
    border: 0; 
    cursor: pointer; 
    zoom: 1; 
}

HTML

 <a class="btn bg-green" href="#" role="button">Download</a> 
     <a class="btn bg-yellow" href="#" role="button">Download</a> 
     <a class="btn bg-red" href="#" role="button">Download</a> 
     <a class="btn bg-blue" href="#" role="button">Download</a> 
     <a class="btn bg-silver" href="#" role="button">Download</a> 
     <a class="btn bg-gray" href="#" role="button">Download</a>

在這裏，你可以發ee值更好的間距如何參差不齊

來源

2016-04-08 riogrande

間距看起來不錯 - 請參閱示例https://jsfiddle.net/tnfLc58h/2/ – aphextwix

您真的應該創建一個可以重現此問題的演示。 – Stickers

這不是普通的香草CSS。 – j08691

從我能搞清楚，這個問題對我來說似乎是sofiafont集上body，所以：

如果更改Arial，你會看到差距沒有區別。

或
可以增加當前font-size從15px到16px並保持sofia

來源

2016-04-08 17:42:22 dippas

好吧，到底什麼？當字體大小爲14px時也適用。爲什麼字體會這樣做？你的回答正確無誤 – riogrande

dippas回答正確地指出，該字體的問題。更具體地說，它是用於問題中按鈕之間的空間的字體。如果你不想改變你的按鈕的字體，這裏有一些解決方法：

改變身體字體，但有sofia的按鈕
刪除按鈕之間的空間和使用保證金，而不是。有兩種方法可以做到這一點： 1）把相鄰的按鈕之間恰好沒有空格或， 2）使用HTML註釋來註釋所有空格

<!-- No whitespace inbetween --> 
<a class="btn"></a><a class="btn"></a> 

<a class="btn"></a><!-- Or, comment it out 
--><a class="btn></a>

更改爲塊元素，設置寬度：auto，將它們全部左移，然後向它們添加特定的邊距。

來源

2016-04-08 18:06:58

偉大的建議！非常感謝 – riogrande

每隔一個按鈕之間的間距不均勻

回答

相關問題