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

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;
}

我已经多次使用网络检查员来查看是否有任何东西将它们分开，但似乎没有任何东西可以在网络检查员中检测到。

Answer 1

只需将vertical-align: bottom添加到空元素中即可。

http://jsfiddle.net/G3Kky/

Answer 2

Explosion Pills所说的，或者在所有元素上使用它：

display: block;
float: left;

Answer 3

对这个恼人问题的快速解决方法是将float div添加到left。所有其他CSS可以保持不变。

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

这是结果：

JS Fiddle Example