这是我正在谈论的图像:
这些按钮没有按照应有的方式彼此垂直对齐。
这是我的 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 中检测到的。