css - 带有大边框的内联块按钮向下两个像素

Question

我有两个“inline-block”按钮，见下图：

但是，如果单击，您将看到另一个按钮向下两个像素。

示例：http: //jsfiddle.net/caio/EUjeY/。

.button {
    border-radius: 2px;
    border: 1px solid #ddd;
    border-bottom: 3px solid #ccc;
    background: #eee;
    padding: 5px 10px;
    display: inline-block;
}

.button:hover {
    background: #e7e7e7;
}

.button:active {
    border-bottom: 1px solid #ddd;
    padding: 7px 10px 5px;
}

你能帮我防止这种情况吗？

谢谢。

Answer 1

您可以将其添加到您的 .button 类中：

vertical-align: top;

工作示例：http: //jsfiddle.net/uW7Sa/1/

Answer 2

只需提供.buttoncss 属性float: left，两个按钮将保持在同一位置。这是因为float: left从文档流中移除了按钮，所以除了包含的 div 之外，它不受其他内联元素的影响：

.button {
    border-radius: 2px;
    border: 1px solid #ddd;
    border-bottom: 3px solid #ccc;
    background: #eee;
    padding: 5px 10px;
    display: inline-block;
    float: left;
}

演示

我会提供更多代码，因为我在这里使用浮点数，但我不知道您文档的其余部分是什么样的，所以我无法补偿。