0

这是我正在谈论的图像:

在此处输入图像描述

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

这是我的 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 中检测到的。

4

3 回答 3

3

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

http://jsfiddle.net/G3Kky/

于 2013-02-17T00:21:46.460 回答
0

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:

Fixed image with float:left

JS Fiddle Example

于 2013-02-17T00:50:23.617 回答
0

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

display: block;
float: left;
于 2013-02-17T00:26:16.947 回答