인라인 블록 div가 래핑되는 것을 방지하는 방법은 무엇입니까?

CSS에서 'display' 속성은 하위 요소의 표시를 설정하는 데 사용됩니다. 표시 속성에 "inline-block" 값을 설정하면 모든 하위 요소가 나란히 표시됩니다. 또한 공간이 충분하지 않은 것처럼 자동으로 반응형 디자인을 생성하고 하위 요소를 자동으로 래핑합니다.

때때로 웹 공간을 관리하기 위해 하위 요소 래핑을 중지해야 할 때도 있습니다. 이 경우 CSS "white-space" 속성을 관리하여 하위 요소가 래핑되는 것을 방지할 수 있습니다.

문법

사용자는 다음 구문을 따르고 "white-space" CSS 속성을 사용하여 인라인 블록 div가 래핑되는 것을 방지할 수 있습니다.

으아아아

위 구문에서 CSS_selector는 "inline-block"이 표시하도록 설정한 모든 하위 요소의 상위 요소입니다.

인라인 블록 요소가 래핑되는 것을 방지하는 방법을 이해하려면 다음 예를 살펴보겠습니다.

예 1

아래 예에서는 "컨테이너" 클래스 이름을 포함하는 상위 div 요소를 만들었습니다. 그런 다음 상위 컨테이너에 "inline-block-div" 클래스 이름을 포함하는 세 개의 하위 요소를 추가했습니다.

CSS에서는 상위 컨테이너에 대해 "white-space: no-wrap" CSS 속성을 사용하고 모든 하위 요소에 대해 "display: inline-block"을 사용합니다. 또한 다른 CSS 속성을 사용하여 div 요소의 스타일을 지정합니다.

출력에서 사용자는 브라우저 창의 크기를 줄이고 인라인 블록 div 요소가 줄 바꿈되지 않거나 다음 줄로 이동하지 않는 것을 관찰할 수 있습니다.

으아아아

예 2

아래 예에서는 서로 다른 데이터가 포함된 여러 테이블을 추가했습니다. 첫 번째 테이블에는 학교 데이터가 포함되고 두 번째 테이블에는 AC 데이터가 포함됩니다.

웹 페이지에 나란히 표시되도록 두 테이블의 표시를 인라인 블록과 동일하게 설정했습니다. 또한 "container" div 요소와 함께 "white-space" 속성을 사용합니다.

출력에서 ​​두 테이블을 나란히 관찰할 수 있으며, 창 크기를 줄이면 두 테이블 요소가 모두 줄 바꿈되지 않으므로 테이블이 다음 줄로 이동하지 않습니다.

으아아아

예 3

아래 예에서는 인라인 블록 div 요소가 조건부로 래핑되는 것을 방지하는 방법을 보여줍니다. 인라인 블록 div 요소가 특정 조건에서 래핑되는 것을 방지해야 하는 경우 JavaScript를 사용할 수 있습니다.

JavaScript에서는 모든 div 요소에 액세스하고 forEach() 메서드를 사용하여 모든 div 요소를 반복합니다. 모든 인라인 블록 div가 JavaScript를 사용하여 래핑되는 것을 방지하기 위해 스타일 개체의 "공백" 속성을 사용합니다.

으아아아

사용자는 인라인 블록 div 요소가 래핑되는 것을 방지하는 방법을 배웠습니다. div 요소가 래핑되는 것을 방지하기 위해 "white-space" CSS 속성을 사용합니다. 그러나 인라인 블록 div 요소가 래핑되는 것을 방지하는 것은 웹 페이지의 응답성을 없애기 때문에 좋은 방법이 아니지만 일부 특정 경우 div 요소가 수직으로 확장되는 것을 원하지 않으면 이를 방지할 수 있습니다.

위 내용은 인라인 블록 div가 래핑되는 것을 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!