有没有办法用 CSS 对齐浮动 HTML 元素？答案

【问题标题】：Is there a way to justify-align floating HTML elements with CSS?有没有办法用 CSS 对齐浮动 HTML 元素？
【发布时间】：2011-05-21 06:41:48
【问题描述】：

本质上，我试图实现“text-align:justify”的效果，但使用浮动块元素。我有很多块要对齐对齐。

即。每条线的水平间距不同，以确保每条线的长度相同。（非参差不齐的右边缘）。

有没有办法用 CSS 做到这一点？如果没有，是否有合适的 JS 库来实现这一点？或者这只是不可行的？

【问题讨论】：

【解决方案1】：

如果项目实际上不是 floating，您可以使用 position:absolute; left:1em; right:1em 让 CSS 根据某个定位的父项的偏移量为您计算项目的宽度。

如果你只使用float，因为你有一些块级的项目你试图使流动，请在项目上使用display:inline-block，而不是浮动它们。如果父元素有 text-align:justify 这应该会给你想要的效果（我想是这样的）。

这是一个simple test，显示inline-block 和text-align:justify 的结果。

编辑：我更新了简单测试，以更清楚地显示除了最后一行之外，左右边缘始终对齐。

【讨论】：

这是预期的效果，但它在 IE7 中不起作用。我已经为 IE7 (jsfiddle.net/mfmfR/3) 修改了它，我认为这可能是我正在寻找的答案。我必须仔细检查这是否真的适用于我现有的代码。谢谢指点！
这行得通，但有一点问题：最后一行不对齐，有没有解决方案，比如完全对齐？
@BotondVajna 您可以通过添加#wrap:after {content:""; display:inline-block; width:100%} 来创建完整的理由。这是a demo。

【解决方案2】：

完成上一个答案，如果您想对齐以编程方式创建的 DOM 节点（例如，通过在 javaScript 中使用 document.createElement 和 parentElement.appendChild），对齐的元素之间不会添加空格。这可能会导致无法对齐。

在我的 Google Chrome 56.0.2924.87 和 Firefox 51.0.1（64 位）浏览器上，如果没有任何空格来分隔 div 元素，则对齐不起作用：

有一个例子是我用javaScript创建DOM节点时：

如果您取消注释命令wrapDiv.appendChild(document.createTextNode(" "));，您可以看到不同之处。可能的解决方案是在 div 节点之后附加一个空白文本节点，如上例所示。

仅在 Chrome 56.0.2924.87 和 Firefox 51.0.1（64 位）上测试。

【讨论】：