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: bottomemtpy要素に追加するだけです。

http://jsfiddle.net/G3Kky/

于 2013-02-17T00:21:46.460 に答える
0

爆発の丸薬が言ったこと、またはすべての要素でこれを使用してください：

display: block;
float: left;
于 2013-02-17T00:26:16.947 に答える
0

この厄介な問題の簡単な修正はfloat、のdivを行うことleftです。他のすべてのCSSは同じままにすることができます。

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


結果は次のとおりです。

float：leftの画像を修正

JSフィドルの例

于 2013-02-17T00:50:23.617 に答える