HTML 요소의 너비 속성이 적용되지 않는 문제에 대한 솔루션

1. 요소의 너비 속성은 효과가 없습니다. 먼저 프로그램을 실행하고 다음을 살펴보겠습니다. [html] 123 스팬이 포함된 콘텐츠에 따라 너비가 자동으로 변경되는 것을 볼 수 있습니다. 그 이유는 다음과 같습니다: 인라인 요소(스팬 요소와 같이 기본적으로 인라인이거나 다음과 같을 수 있음) 1. 요소의 너비 속성은 효과가 없습니다
먼저 프로그램을 실행하여 확인하세요:

팁: 먼저 코드의 일부를 수정한 다음 실행해 보세요

보실 수 있습니다 스팬은 포함된 콘텐츠를 기반으로 자동으로 너비를 변경하려면
이유는 다음과 같습니다. 인라인 요소(스팬 요소 또는 display: 인라인 요소와 같이 기본적으로 인라인일 수 있음)의 경우
너비와 높이만 사용할 수 있습니다. IE5.x 및 IE6 이상에서는 HasLayout이 해당 버전의 쿼크 모드에서 트리거됩니다. IE6의 경우 브라우저가 표준 호환 모드에서 실행 중인 경우 인라인 요소는 너비 또는 높이 속성을 무시하므로 이 경우 너비 또는 높이를 설정하면 요소가 레이아웃을 갖도록 주문할 수 없습니다.
"레이아웃"이 있는 요소도 표시되는 경우: 인라인, 해당 동작은 표준에 언급된 인라인 블록과 매우 유사합니다. 일반 텍스트처럼 단락에서 수평으로 연속적으로 정렬되며 수직 정렬 영향을 받습니다. 그리고 내용에 따라 크기를 적절하게 조정할 수 있습니다. 이는 또한 IE/Win에서만 인라인 요소가 문제가 적은 블록 수준 요소를 포함할 수 있는 이유를 설명할 수 있습니다. 왜냐하면 다른 브라우저에서 display: inline은 IE/Win과 달리 인라인을 의미하기 때문입니다. 인라인 요소에 레이아웃이 있으면 여전히 인라인을 의미합니다. 레이아웃이 인라인 블록이 됩니다.
해결책:
<1>ASP.NET 페이지에서 W3C 표준 선언을 제거합니다(권장하지 않음):

123
<2>추천:
display:block을 설정하면 width 속성이 적용되지만 이때의 Span은 p와 동일합니다.
display:inline-block이 설정되면 범위가 같은 행에 나열되고 너비 속성이 적용됩니다.

요소 표시 속성의 공통 값 설명:
block: 블록 개체의 기본값입니다. 객체를 강제로 블록 객체로 렌더링하여 객체 뒤에 새 줄을 추가합니다.
inline: 인라인 개체의 기본값입니다. 개체를 인라인 개체로 렌더링하여 개체에서 행을 제거합니다. (인라인) "CSS에 대한 최종 가이드" 중국어 텍스트 표시: 블록 수준 요소가 아닌 모든 표시 요소는 인라인 요소입니다. 성능의 특징은 "행 레이아웃" 형식입니다. 여기서 "행 레이아웃"은 표현 형식이 항상 행으로 표시된다는 의미입니다. 예를 들어 인라인 요소 border-bottom:1px solid #000;을 설정하면 각 줄에서 반복되며 각 줄 아래에 얇은 검정색 선이 생깁니다. 블록 수준 요소인 경우 표시된 검은색 선은 블록 아래에만 나타납니다.
inline-block: 객체를 인라인 객체로 렌더링하지만 객체의 내용은 블록 객체로 렌더링됩니다. 인접한 인라인 개체는 같은 줄에 렌더링됩니다.
non: 숨겨진 개체. visibility 속성의 숨겨진 값과 달리 숨겨진 개체를 위한 물리적 공간을 예약하지 않습니다.
인라인(display:inline;) 요소는 라인 레이아웃에 속하고 한 줄에 배치되는 특성이 있어 너비와 높이를 설정할 수 없습니다.
123

<3>float:left | right
(플로팅) 지정된 요소가 일반적인 문서 흐름에서 벗어날 수 있도록 하여 특별한 레이아웃 특성을 만듭니다. 그리고 FLOAT는 블록 수준 요소에 적용되어야 합니다. 즉, 인라인 태그에는 플로팅이 적용되지 않습니다. 즉, FLOAT가 적용되면 이 요소는 블록 수준 요소로 지정됩니다.
123
2 CSS 표시: 인라인 속성과 부동소수점의 차이점
디스플레이: 인라인; attribute 이 기능은 블록 수준 요소를 p와 같은 인라인 요소로 변환하는 것입니다. 인라인 속성을 설정한 후에는 더 이상 별도의 줄을 차지하지 않습니다. 그러나 float 속성 페이지를 사용하여 동일한 효과를 얻을 수 있습니다. (인라인 요소 및 블록 수준 요소에 대한 자세한 내용은 인라인 요소 및 블록 수준 요소를 참조하세요.)
요소가 inline 속성으로 설정되어 인라인 요소가 되면 width 속성을 설정해도 아무런 효과가 없습니다.
디스플레이를 읽은 후: 인라인이 블록 수준 요소에 미치는 영향, float가 인라인 요소에 미치는 영향을 살펴보겠습니다.
즉, 인라인 요소가 float 속성을 설정하면 실제로는 블록 수준 요소라고 생각하고, 너비 속성을 설정할 수 있습니다

위 내용은 HTML 요소의 너비 속성이 적용되지 않는 문제에 대한 솔루션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!