如何在没有额外垂直空间的情况下正确对齐内联块元素？

使用“text-align: justify;”对内联块元素进行正确的文本对齐

一些讨论探讨了均匀分布的挑战使用“text-align: justify;”跨内联块元素的文本。然而，一个挥之不去的问题是元素行下方出现的空白垂直空间。

建议的解决方法，如本小提琴中所示，涉及设置“line-height: 0;”在父元素上。但是，这会牺牲之前在子元素上设置的行高。

此小提琴中提出的替代解决方案可以解决此问题，而不会影响line-height:

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%;
}

说明

“:before”上的“display: block” " 具有负下边距的元素会将文本提升一个行高，从而消除多余的行。内联块元素上的“position:relative”抵消了这种位移，但不添加额外的行。

在 margin-bottom 和 top 设置中使用“em”可以容纳任何设置为的行高乘数值。这可确保位移与预期的行高相匹配。

未来清洁解决方案

未来潜在的解决方案采用 webkit 属性：

.prevNext {
    text-align: justify;
    -moz-text-align-last: justify;
    -webkit-text-align-last: justify;
    text-align-last: justify; /* IE */
}

此方法适用于 Firefox 12.0 和 IE8 ，但需要在 Webkit 浏览器中启用实验功能。在 Webkit 版本 39 中，无需“-webkit-”扩展名即可支持此属性，但前提是启用了实验性功能。

以上是如何在没有额外垂直空间的情况下正确对齐内联块元素？的详细内容。更多信息请关注PHP中文网其他相关文章！