什麼導致這些按鈕之間的間距不均勻？

我想不出是什麼原因造成的不均勻間距您將圖片http://i.imgur.com/AZoXzYf.png中看到的（不能嵌入圖像尚未...對不起）它來自http://playclassicsnake.com/Scores。我的相關CSS是什麼導致這些按鈕之間的間距不均勻？

.page-btn { background: #19FF19; color: #FFF; border: 0; border: 3px solid transparent; } 
.page-btn.cur-page { border-color: #FFF; cursor: pointer; } 
.page-btn + .page-btn { margin-left: 5px; }

我檢查了元素以確保沒有任何腥意。這是怎麼回事？

來源

2015-11-04 Suicidal Web Developer

檢查喲你在前兩個'.page-btn'之間沒有任何空白字符或新行。 – Moob

您的HTML換行字符只是你的第一個按鈕後：

<button class="page-btn cur-page">1</button> 
<button class="page-btn">2</button><button class="page-btn">3</button>

使這一切在1號線，它會開始沒有任何多餘的空間工作：

<button class="page-btn cur-page">1</button><button class="page-btn">2</button><button class="page-btn">3</button>

你的CSS是完全正常的，並不需要改變爲其他人所說..

來源

2015-11-04 08:03:28 divix

我不知道換行符會影響任何東西 –

-1

儘量讓父內容0的字體大小，也儘量字母間距設置爲0

來源

2015-11-04 07:58:32 paradizzee

嗨現在嘗試這個CSS

#page-btns-holder { 
    width: 80%; 
    margin-top: 12px; 
    font-size: 0; 
} 
div#page-btns-holder * { 
    font-size: 14px; 
} 
.page-btn { 
    background: #19FF19; 
    color: #FFF; 
    border: 0; 
    border: 3px solid transparent; 
    display: inline-block; 
    vertical-align: top; 
    font-size: 14px; 
}

定義你的btndisplay inline-block和刪除空間到inline-blockelement定義您的專利font-size:0;和子定義font-size:14px;像這樣我給你的例子

Remove Whitespace Between Inline-Block Elements

來源

2015-11-04 08:01:55

什麼導致這些按鈕之間的間距不均勻？

回答

相關問題