How to Align Two Inline-Block Elements Left and Right on the Same Line?

Align Two Inline-Blocks Left and Right on the Same Line

In modern web development, aligning two inline-block elements left and right on the same line can be a seemingly complex task. However, using the right techniques can simplify the approach.

Flexbox

Flexbox provides a straightforward solution. By applying display: flex to the parent container and justify-content: space-between to its children, elements can be placed at opposite ends of the container with equal spacing. This can be easily implemented as follows:

<code class="css">.header {
    display: flex;
    justify-content: space-between;
}</code>

Text-Align: Justify

An alternative technique involves utilizing text-align: justify on the parent element. However, this requires additional hacks to ensure compatibility with older browsers:

<code class="css">.header {
    text-align: justify;
    /* IE 7 */
    *width: 100%;
    *-ms-text-justify: distribute-all-lines;
    *text-justify: distribute-all-lines;
}
.header:after {
    content: '';
    display: inline-block;
    width: 100%;
    height: 0;
    font-size: 0;
    line-height: 0;
}</code>

To prevent extra space being inserted with the :after pseudo-element, a trick can be employed:

<code class="css">.header {
    font-size: 0;
}
h1, .nav {
    font-size: 14px;
}</code>

By setting the parent element's font-size to 0 and resetting it for the child elements, the issue can be resolved.

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