How to Horizontally Align Two Elements Without Changing the HTML?

Aligning Two Elements on the Same Line Without Modifying Markup

When styling elements, aligning them horizontally can be a challenge, especially if their width fluctuates. Consider a scenario with two elements, "element1" and "element2," positioned on the same line with left and right floats, respectively. The challenge arises when "element2"'s width varies, causing it to misalign with "element1."

To address this, the CSS property display:inline-block provides a solution. By applying this property to both elements, they will behave as inline elements but be positioned like block elements.

CSS Code:

#element1 {
  display: inline-block;
  margin-right: 10px; /* Adjust the margin for desired spacing */
}

#element2 {
  display: inline-block;
}

Markup:

<div>

By setting display:inline-block on both elements, they will align horizontally with a specified margin of 10px between them. This ensures that "element2" aligns with "element1" even when its width changes, without modifying the HTML structure.

The above is the detailed content of How to Horizontally Align Two Elements Without Changing the HTML?. For more information, please follow other related articles on the PHP Chinese website!