HTML을 변경하지 않고 두 요소를 수평으로 정렬하는 방법은 무엇입니까?

마크업을 수정하지 않고 두 요소를 같은 줄에 정렬

요소 스타일을 지정할 때 요소를 가로로 정렬하는 것은 어려울 수 있습니다. 특히 요소 너비의 경우에는 더욱 그렇습니다. 변동합니다. 두 개의 요소 "element1"과 "element2"가 각각 왼쪽 및 오른쪽 부동 소수점과 함께 동일한 줄에 배치된 시나리오를 생각해 보세요. 문제는 "element2"의 너비가 다양하여 "element1"과 잘못 정렬될 때 발생합니다.

이 문제를 해결하기 위해 CSS 속성 display:inline-block이 해결책을 제공합니다. 이 속성을 두 요소 모두에 적용하면 인라인 요소처럼 동작하지만 블록 요소처럼 배치됩니다.

CSS 코드:

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

#element2 {
  display: inline-block;
}

마크업:

<div>

두 요소 모두에 display:inline-block을 설정하면 그 사이에 10px의 지정된 여백을 두고 수평으로 정렬합니다. 이렇게 하면 너비가 변경되더라도 HTML 구조를 수정하지 않고도 "element2"가 "element1"과 정렬됩니다.

위 내용은 HTML을 변경하지 않고 두 요소를 수평으로 정렬하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!