How Can I Align Inline-Blocks Left and Right on the Same Line?

Aligning Inline-Blocks Left and Right on the Same Line

Achieving proper alignment of inline-blocks can be a challenge. This issue arises when attempting to position two inline-blocks, one on the left and one on the right, on a single line.

However, there are solutions available that can address this predicament. While using floats may not be ideal for maintaining baseline alignment and responding to window resizing, other techniques offer more flexibility.

Using Flexbox for Efficient Alignment

Modern browsers offer support for flexbox, which provides a concise and adaptable approach to alignment. By assigning display: flex to the parent container and justify-content: space-between to its children, you can effectively space them apart while ensuring they remain on the same line.

.header {
    display: flex;
    justify-content: space-between;
}

Leveraging the Text-Align Justification Technique

If flexbox is not supported, consider employing the text-align: justify technique. This approach distributes white space evenly between words and lines, creating an effect similar to justified text in word processors.

.header {
    text-align: justify;
}

.header:after{
    content: '';
    display: inline-block;
    width: 100%;
    height: 0;
    font-size:0;
    line-height:0;
}

However, this technique requires additional considerations for browsers like IE7 and earlier, where "star hacks" are needed to ensure compatibility.

Addressing White Space Artifacts

In some instances, inline-blocks may introduce unwanted white space, affecting the alignment. To resolve this issue, you can set the font-size of the parent element to 0 and reset it back to the desired value for the child elements. This approach effectively eliminates any additional gaps created by the pseudo-element used in the text-align: justify method.

The above is the detailed content of How Can I Align Inline-Blocks Left and Right on the Same Line?. For more information, please follow other related articles on the PHP Chinese website!