How to Align Inline-Blocks on the Same Line: Flexbox vs. Text Justification?

Aligning Inline-Blocks on the Same Line: A Comprehensive Solution

While aligning inline-blocks on the same line can be challenging, there are effective solutions available. Let's delve into two commonly used approaches.

Option 1: Flexbox

Flexbox provides a straightforward and flexible way to achieve the desired alignment. By applying display: flex; to the parent container, you can manipulate the placement of its children using justify-content: space-between;. This approach offers excellent cross-browser compatibility.

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

Option 2: Text Justification

For wider browser support, you can utilize the text-align: justify technique along with star-hacks for older versions of Internet Explorer.

<code class="css">.header {
  background: #ccc;
  text-align: justify;
}

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

h1 {
  display: inline-block;
  margin-top: 0.321em;
}

.nav {
  display: inline-block;
  vertical-align: baseline;
}</code>

This method addresses the absence of separation between inline-block elements by adding an empty element using the :after pseudo-element:

<code class="css">.header:after {
  content: '';
  display: inline-block;
  width: 100%;
  ...
}</code>

To eliminate extra space caused by the :after pseudo-element, set font-size to 0 for the parent and reset it to the desired value for child elements:

<code class="css">.header {
  font-size: 0;
}

h1, .nav {
  font-size: 14px;
}</code>

The above is the detailed content of How to Align Inline-Blocks on the Same Line: Flexbox vs. Text Justification?. For more information, please follow other related articles on the PHP Chinese website!