如何在没有额外换行符的情况下正确调整内联块元素？-css教程-PHP中文网

如何在没有额外换行符的情况下正确调整内联块元素？

Barbara Streisand

发布： 2024-12-01 20:35:15

原创

808 人浏览过

How Can I Properly Justify Inline-Block Elements Without Extra Line Breaks?

行内块元素能否通过“text-align: justify;”正确对齐？

之前的讨论已经探讨了如何应用“ text-align: justify" 均匀分布内联块元素。但是，使用此技术时，会在对齐元素行的末尾创建换行符。

当前解决方法

要消除此额外的垂直空间，解决方法包括在“之前的元素”上使用负边距，同时对内联块元素应用“position:relative”。此组合会将文本行向上移动，删除多余的行。

.prevNext {
    text-align: justify;
}

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

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

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

登录后复制

未来的解决方案

将来，“text-align-last”属性Firefox 和 Internet Explorer 支持，可以提供更直接的解决方案。然而，它目前在 Webkit 中尚未完全实现。

.prevNext {
    text-align: justify;
    text-align-last: justify;
}

登录后复制

此属性允许对齐内联块元素的最后一行，从而无需解决方法。

以上是如何在没有额外换行符的情况下正确调整内联块元素？的详细内容。更多信息请关注PHP中文网其他相关文章！