如何在没有不需要的间距的情况下调整内联块元素？

使用“text-align: justify”对齐内联元素

尽管之前尝试使用“text-align: justify”均匀对齐内联块元素，但出现问题：浏览器在 100% 宽度元素后面添加了一个空白的垂直空间，从而清除了 inline-block 行

寻求不使用 line-height: 0 的解决方案，这会消除空白但丢弃原始行高，我们探索潜在的替代方案。

目前的解决方法（IE8 、 FF，Chrome 测试）

（参见小提琴： https://jsfiddle.net/jasperdeGroot/xe27o/)

CSS:

.prevNext {
    text-align: justify;
}

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

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

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

说明：

此解决方法利用具有负下边距的 :before 伪元素将文本向上移动，消除多余的线。然后使用position:relative调整内联块元素以补偿这种位移。

未来的解决方案

一个等待全面支持的有前途的解决方案是使用“ text-align-last: justify”，无需解决方法即可对齐内联元素。然而，它目前需要在 Webkit 浏览器中启用实验性功能，限制了其可访问性。

（参见小提琴：https://jsfiddle.net/jasperdeGroot/c3r4w/）

CSS:

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

注意：在实现完全支持之前，此解决方案可能并不适合所有浏览器。

以上是如何在没有不需要的间距的情况下调整内联块元素？的详细内容。更多信息请关注PHP中文网其他相关文章！