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

Can Inline-Block Elements Be Properly Aligned with "text-align: justify;"?

Previous discussions have explored how to apply "text-align: justify" to evenly distribute inline-block elements. However, when using this technique, a line break is created at the end of the line of justified elements.

Present Workaround

To eliminate this extra vertical space, a workaround involves using a negative margin on an "element before" while applying "position: relative" to the inline-block elements. This combination shifts the lines of text up, removing the extra line.

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

Future Solution

In the future, the "text-align-last" property, supported in Firefox and Internet Explorer, could provide a more straightforward solution. However, it is currently not fully implemented in Webkit.

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

This property allows the last line of inline-block elements to be justified, eliminating the need for the workaround.

The above is the detailed content of How Can I Properly Justify Inline-Block Elements Without Extra Line Breaks?. For more information, please follow other related articles on the PHP Chinese website!