带浮动的孤儿 <li>：左边是向右浮动

Question

我有一个 <ul> 有七个 <li>。 <li> 应用了这个 css：

float: left;
width: 33.333%;
border: 3px solid #fff;
margin: 0;

因此它们出现在 3x2 + 1（第七个）网格中。我遇到的问题是最后一个 [orphan] <li> 项目由于某种原因正确对齐。像这样：

我已经上下检查了 html 和 css 中的层次结构，以找到可能会推动这件事的继承风格，但我一无所获。如果您想查看我的暂存站点以进一步调查这个问题，请告诉我（我之前被指控在这里自我推广链接，所以我会等到有人问我）。

Answer 1

发现一个 <li> 元素的高度偏移了 0.28 像素，这让所有元素都变差了——迫使最后一个孤儿向右移动。

将此添加到我的 CSS:

max-height: 218px;

现在一切正常。