CSS问题：大字母搞乱我的div对齐

Question

http://ttt-ai.heroku.com/是问题的网址（只需点击是或否）然后点击任意方块，您就会看到发生了什么。

屏幕截图：

现在只是正方形混乱了。我没有考虑过如何设计X和O的样式

Answer 1

.square_container {
  display: inline-block;
  vertical-align: top;
}

因为vertical-align是默认的基线，所以它会尝试在框中对齐文本内容的基线。因为你在某些方框中没有文字，所以它们的位置不同。

如果你检查整行，你会看到他们再次排队upp。

Answer 2

要正确显示内容，请尝试：

.ttt_square {
    ...
    float: left;
    ...
}

如果您在div 中有一个a（正如我在评论中指出的那样，这里不是问题，因为你已经使用HTML5 doctype）：

<div id="1x1" class="square_container">
    <a data-remote="true" href="/board/take_turn?id=70&amp;x=1&amp;y=1">
        <div class="ttt_square"> 
            &nbsp;
        </div>
    </a> 
</div>

现在已经允许了（在HTML4中，在你的网站上很好）......

About.com的“valid context”列表在这里很有用：

<a>内容：

  

CDATA您想要链接的任何文本。   以下标签在其中有效   标签：acronym，applet，b，   basefont，bdo，big，br，button，cite，   代码，dfn，em，字体，i，iframe，img，   输入，kbd，标签，地图，对象，q，s，   samp，script，select，small，span，   罢工，强，亚，textarea，tt，你，   VAR

请注意此列表中缺少div。

Answer 3

从整个节目中移除inline-block会修复它。

遵循以下每个步骤：

• 从.player_take_square，删除position: absolute。
• 从.ttt_square和.square_container，删除display: inline-block。
• 要.ttt_square，请添加float: left。
• 要.ttt_square，请添加overflow: auto（以清除所有浮动的方块）。

适用于Chrome和Firefox。

为了让X看起来更漂亮，我还在Firefox中测试了这些样式：

.player_take_square {
    color: #fff;
    line-height: 140px;
    text-align: center
}