Css “文本对齐：对齐；”内联块元素是否正确？

其他几个问题已经解决了如何最好地应用文本对齐：对齐以使内联块元素均匀分布…例如

但是，清除内联块元素行的100%宽度元素由浏览器指定其自己的行。我想不出如何在不使用线条高度的情况下消除空白的垂直空间：0；在父元素上

有关此问题的示例，请参见

对于使用线高度的解决方案：0；，看

---

我使用的解决方案要求对子元素应用新的线条高度，但以前设置的任何线条高度都将丢失。有人知道更好的解决方案吗？我希望避免使用表格，以便在必要时可以包装元素，也希望避免使用flexbox，因为目前还没有浏览器支持。我还希望避免浮动，因为间隔的元素数量是任意的。

我认为最好的方法是创建具有特定类/id的可单击元素，然后相应地分配float:left或float:right。希望有帮助

更新了下面的未来解决方案信息；仍然没有得到充分支持

当前解决方案IE8+、FF、铬测试 相关CSS

普雷弗奈特先生{ 文本对齐：对齐； } 普雷瓦先生{ 显示：内联块； 位置：相对位置； 顶部：1.2米；/*您的线条高度*/ } .下一个：之前{ 内容：； 显示：块； 宽度：100%； 页边距底部：-1.2米；/*您的线条高度*/ } .下一个：之后{ 内容：； 显示：内联块； 宽度：100%； } 解释

底边距为负数的：before元素上的display:块将文本行向上拉一行高，这将消除多余的行，但会替换文本。然后使用内联块元素上的position:relative抵消位移，但不向后添加额外的线

尽管css本身无法直接访问线条高度单位，但在页边距底部和顶部设置中使用em很容易适应作为其中一个参数给定的任何线条高度。因此，在计算中，1.2、120%或1.2em都与线条高度相等，这使得在这里使用em是一个很好的选择，因为即使设置了线条高度：1.2，那么边距底部和顶部的1.2em也将匹配。规范化场地外观的良好编码意味着应明确定义某些点的线高度，因此，如果使用任何乘数方法，则等效em单位将给出与线高度相同的值。如果行高度设置为非em长度，例如px，则可以设置该长度

当然，使用css预处理器（如LESS或SCSS）使用变量或mixin有助于保持这些值与适当的行高匹配，或者可以使用javascript动态读取这些值，但实际上，行高应该在使用它的上下文中知道，并在此处进行适当的设置

更新缩小文本无空格问题

Kubi的评论指出，html的一个缩略删除了两个文本之间的空格。A但这是意料之中的，因为空间发生在内联块元素中，A可能是因为下一行不需要中断，因此如果需要缩小，那么-其他空间字符（如和）不会意外工作

接近未来的清洁解决方案 其中，在第一次写作时：

.prevNext {
    text-align: justify;
    -moz-text-align-last: justify;
    -webkit-text-align-last: justify; /* not implemented yet, and will not be */
    text-align-last: justify; /* IE */
}

IE7中的四轮马车

对于Webkit，至少从第39版开始，可能在更早的时候就已经出现了，它确实支持它，但不支持-Webkit-扩展，但前提是用户启用了可以在chrome://flags/enable-experimental-web-platform-features. 谣传41版或42版应该得到完全支持。由于webkit尚未无缝支持它，因此它仍然只是部分解决方案。然而，我认为我应该发布它，因为它可能对某些人有用。

试图针对这个问题进行文本对齐是非常不礼貌的。text align属性用于对齐块的内联内容，特别是文本，而不是对齐html元素

我知道您试图避免浮动，但在我看来，浮动是完成您试图完成的任务的最佳方式。

在您的示例中，您的线条高度为：1.2，没有单位。这可能会引起一些问题。如果不使用边框，可以将父对象和子对象的线条高度设置为0

我能想到的其他选择是：

使用父对象上的display:table和子对象上的display:table单元格模拟类似于表格的行为。然后将第一个项目向左对齐，最后一个项目向右对齐。看这个。 使用javascript对nav子项进行计数，然后给它们一个平均分布的宽度。4个孩子，每个孩子有25%的宽度。并将第一个和最后一个项目分别向左和向右对齐。 有一种方法可以均匀地分配项目，但这是一种复杂的方法，需要使用一些不间断的空格

---

grok@MoinZaman的Sitepoint链接，并希望有其他不需要行高的答案：0；，但这感觉很接近。嘿，第三个！是的，我看过一些不同的东西，但我经常发现，特别是对于CSS，最简单的方法效果最好。围绕display:table和display:table单元格进行更改很好，但这会导致更广泛的潜在后代css冲突。在我看来，追求可维护和可理解的，并为flexbox祈祷！使用：.prevNext>*可能有助于提高某些性能，因此它只查看.prevNext的直接子代，而不是所有子代。当然，这仍然是一个线高度重置，在问题中，OP说他试图避免。同意性能问题！关于重置问题：OP询问是否有更好的解决方案，并试图避免表格、flexbox和浮动，而不是具体的线高度重置。是的……我试图避免线高度重置，因为它应该继承自父元素，但更重要的是，我试图避免指定固定的线高度。线条高度：1.2米或线条高度：1.2接近线条高度：正常，但每个字体都定义了自己的“正常”线条高度，因此1.2只是近似值。我没有意识到行高：正常是一个选项，我尝试了“默认”和“自动”，但在我的谷歌搜索中错过了“正常”。我仍然想要一个更好的解决方案，但我认为这在9/10用例中是有效的，它适用于我的SCSS混音。如果你的内容长度不等，这项技术并不是神奇的解决方案。我修改了小提琴以显示这一点。您可以清楚地看到，短链接周围的间距远小于长链接周围的间距。不完全“合理”。

.prevNext *{
    line-height: 1.2;  /* or normal */
}

.prevNext {
    display: table;
    width: 100%
}

.prevNext a {
    display: table-cell;
    text-align: center
}

.prevNext {
    border: 1px solid #ccc;
    position: relative;
    height: 1.5em;
}

.prevNext a {
    display: block;
    position: absolute;
    top: 0;
}

.prevNext a:first-child {
    left: 0;
    text-align: left;
}
.prevNext a:last-child {
    right: 0;
    text-align: right;
}
​

.prevNext {
    text-align: justify;
    -moz-text-align-last: justify;
    -webkit-text-align-last: justify; /* not implemented yet, and will not be */
    text-align-last: justify; /* IE + Chrome */
}