html - 为什么我的按钮偏离中心？

Question

这是我正在谈论的图像：

这些按钮没有按照应有的方式彼此垂直对齐。

这是我的 HTML 代码：

            <div class="incorrect-guesses">
                <h4>Incorrect Guesses</h4>
                <div class="incorrect-guess">A</div>
                <div class="incorrect-guess">A</div>
                <div class="incorrect-guess">A</div>
                <div class="incorrect-guess">A</div>
                <div class="empty-guess"></div>
                <div class="empty-guess"></div>
                <div class="empty-guess"></div>
                <div class="empty-guess"></div>
            </div>

以及作用于它们的 CSS：

.empty-guess {
    display: inline-block;
    width: 38px;
    height: 38px;
    margin: 0 3px 6px 0;

    border: 1px solid #ccc;
}

.incorrect-guess {
    display: inline-block;
    width: 40px;
    height: 40px;
    margin: 0 3px 6px 0;

    background: #e32a3c;
    color: #fff;
    line-height: 2.5em;
    text-align: center;
    text-decoration: none;
}

我已经多次使用 web-inspector 来查看是否有任何东西以这种方式将它们分开，但似乎没有什么是我可以在 web-inspector 中检测到的。

Answer 1

只需添加vertical-align: bottom到空元素。

http://jsfiddle.net/G3Kky/

Answer 2

A quick fix for this annoying problem is to float the divs to the left. All other CSS can remain the same.

.empty-guess, .incorrect-guess {
   float: left;
}

This is the result:

JS Fiddle Example

Answer 3

什么爆炸药丸说的，或者在所有元素上使用这个：

display: block;
float: left;