“文本对齐：证明；” 内联块元素正确吗？

小编典典

“文本对齐：证明；” 内联块元素正确吗？

css

其他一些问题已经解决了如何最好地应用text-align: justify以使内联块元素均匀分布……例如，如何真正地证明 HTML +
CSS中的水平菜单？

但是，浏览器为“清除”行内块元素行的100％宽度元素提供了自己的行。我不知道如何在不使用line-height: 0;父元素的情况下摆脱空的垂直空间。

我正在使用的解决方案要求line-height对子元素应用新的解决方案，但是之前设置的所有内容line- height都会丢失。有谁知道更好的解决方案？我想避免使用表，以便在必要时可以包装元素，也可以避免使用flexbox，因为还没有浏览器支持。我也想避免使用浮点数，因为间隔的元素数是任意的。

阅读 304

2020-05-16

共1个答案

小编典典

更新了下面的“未来”解决方案信息；仍未完全支持。

当前解决方法（IE8 +，FF，Chrome已测试）

相关CSS

.prevNext {
    text-align: justify;
}

.prevNext a {
    display: inline-block;
    position: relative;
    top: 1.2em; /* your line-height */
}

.prevNext:before{
    content: '';
    display: block;
    width: 100%;
    margin-bottom: -1.2em; /* your line-height */
}

.prevNext:after {
    content: '';
    display: inline-block;
    width: 100%;
}

说明

在display: block上:before有负下边距元素拉文达一行的高度，它消除了多余的线的线，但是置换文本。然后，position: relative在inline-block元素上使用时，将抵消位移，但不增加额外的行。

尽管css本身不能直接访问line-height“单位”，但em在margin-bottom和top设置中的使用很容易容纳任何line- height作为乘数值之一的给定值。因此1.2，120%或1.2em都等于在计算 相对于line- height，这使得利用em这里一个不错的选择，因为即使line-height: 1.2是一组，然后1.2em对margin- bottom和top匹配。良好的编码以规范化站点的外观意味着line- height应在某个点明确定义，因此，如果使用任何乘数方法，则等效em单位的值将与相同line-height。并且如果line- height设置为非em``px可以设置的长度（例如）。

使用诸如LESS或SCSS之类的css预处理器绝对具有变量或mixin可以帮助使这些值与适当的值保持匹配line- height，或者可以使用javascript来动态读取这些值，但实际上，line-height应该在使用此值的上下文中知道，并在此处进行适当的设置。

更新以缩小文本（无空格）问题

库比（Kubi）的评论指出，删除<a>元素之间的空格的html缩小会导致对齐失败。一个在内部伪空间<a>标签没有帮助（但预计，随着空间的内部发生inline-block元件），<wbr>之间添加<a>标签没有帮助（可能是因为休息没有必要到下一行），因此，如果需要最小化，然后解决方案是硬编码的不间断空格字符- 其他空格字符（如稀薄空间和en空格）不起作用（令人惊讶地）。

即将到来的清洁解决方案

其中webkit是落伍（作为第一写这）为：

.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 */
}

它适用于FF 12.0+和IE8 +（IE7中为Buggy）。

对于Webkit的，作为39版（至少，可能有早期蹑手蹑脚），它支持它没有了-webkit-，但是扩展 仅当 _用户_启用了实验性的功能（可在完成chrome://flags/#enable-experimental-web-platform- features）。有传言说版本41或42应该获得完全支持。由于webkit尚未得到无缝支持， 因此它仍然只是部分解决方案。但是，我认为我应该发布它，因为它可能对某些人有用。

2020-05-16