什么导致我的这些按钮之间的间距不均匀？

Question

我无法弄清楚你在图片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; }

我已经检查了这些元素，以确保没有任何可疑之处。这笔交易是什么？

Answer 1

您现在尝试使用此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;
}

定义您的btn display inline-block并移除空格以inline-block element定义您的专利font-size:0;和子定义font-size:14px;就像这样我给你的例子

<强> Remove Whitespace Between Inline-Block Elements

Answer 2

您的第一个按钮后面的HTML中有一个换行符：

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

将它全部放在一行，它将开始工作，没有任何额外的空格：

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

您的CSS非常好，不需要像其他人所说的那样进行更改。

Answer 3

尝试将父内容的字体大小设为0，同时尝试将字母间距设置为0.