HTML을 변경하지 않고 두 요소를 어떻게 수평으로 정렬할 수 있습니까?

HTML 변경 없이 같은 줄에 요소 정렬

너비가 동적일 때 요소를 가로로 나란히 배치하는 것은 문제가 될 수 있습니다. 두 요소가 같은 줄에서 왼쪽과 오른쪽으로 부동하는 이 시나리오에서는 element2의 가변 너비가 잠재적으로 element1과 잘못 정렬되어 문제가 발생합니다.

HTML을 수정하지 않고 이 문제를 해결하려면 display:inline- 사용을 고려하세요. 차단하다. 이 기술은 블록과 같은 동작을 유지하면서 요소를 인라인 요소로 정의합니다. display:inline-block 및 margin-right 값 10px로 element1을 정의하면 두 요소 사이에 일관된 거리가 생성됩니다.

구현:

#element1 {
  display: inline-block;
  margin-right: 10px;
}

#element2 {
  display: inline-block;
}

예:

<div>

이 방법을 사용하면 element2의 동적 너비에 관계없이 element1 사이에 일관된 패딩을 사용하여 element2를 element1 옆에 정렬합니다.

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