Home > Article > Web Front-end > 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!