Span 요소의 width 속성에 effect_javascript 기술이 없는 이유와 해결 방법

먼저 프로그램을 실행하고 살펴보세요:
123

출력: 123

span이 포함된 콘텐츠에 따라 너비가 자동으로 변경되는 것을 볼 수 있습니다.

인라인 요소(span 요소 또는 디스플레이: 인라인 요소와 같이 기본적으로 인라인일 수 있음)의 경우
너비와 높이는 IE5.x 및 IE6 이상 버전에서만 사용할 수 있습니다. 이상한 hasLayout이 모드에서 트리거됩니다. IE6의 경우 브라우저가 표준 호환 모드에서 실행 중인 경우 인라인 요소는 너비 또는 높이 속성을 무시하므로 이 경우 너비 또는 높이를 설정하면 요소가 레이아웃을 갖도록 주문할 수 없습니다.
zoom은 항상 hasLayout을 실행할 수 있지만 IE5.0에서는 지원되지 않습니다.

"레이아웃"이 있는 요소도 인라인으로 표시되는 경우 해당 요소의 동작은 표준에 언급된 인라인 블록과 매우 유사합니다. 즉, 일반 텍스트처럼 단락에서 가로로 연속적으로 배열되며 세로의 영향을 받습니다. -align, 내용에 따라 크기를 적응적으로 조정할 수 있습니다. 이는 또한 IE/Win에서만 인라인 요소가 문제가 적은 블록 수준 요소를 포함할 수 있는 이유를 설명할 수 있습니다. 왜냐하면 다른 브라우저에서 display: inline은 IE/Win과 달리 인라인을 의미하기 때문입니다. 인라인 요소에 레이아웃이 있으면 여전히 인라인을 의미합니다. 레이아웃이 인라인 블록이 됩니다.



해결책:

ASP.NET 페이지에서 W3C 표준 설명을 제거합니다(권장하지 않음):
제거:
123


권장사항:

display:block을 설정하면 width 속성이 적용되지만 이때의 범위는 다음과 같습니다. 사업부.
display:inline-block이 설정되면 범위가 같은 행에 나열되고 너비 속성이 적용됩니다.

요소의 표시 속성에 대한 일반적인 값 설명:

block: 블록 객체의 기본값입니다. 객체를 강제로 블록 객체로 렌더링하여 객체 뒤에 새 줄을 추가합니다.
inline: 인라인 객체의 기본값입니다. 개체를 인라인 개체로 렌더링하여 개체에서 행을 제거합니다. (인라인)

"CSS 최종 가이드" 중국어 텍스트 표시: 블록 수준 요소가 아닌 모든 표시 요소는 인라인 요소입니다. 성능의 특징은 "행 레이아웃" 형식입니다.

여기서 "행 레이아웃"은 표현 형식이 항상 행으로 표시된다는 의미입니다.

예를 들어 인라인 요소 border-bottom:1px solid #000;을 설정하면 각 줄에서 반복되며 각 줄 아래에 가는 검은색 선이 생깁니다.

블록 수준 요소인 경우 표시되는 검은색 선은 블록 아래에만 나타납니다.
inline-block: 객체를 인라인 객체로 렌더링하지만 객체의 내용을 블록 객체로 렌더링합니다. 인접한 인라인 개체는 같은 줄에 렌더링됩니다.
비: 숨은 물건. 가시성 속성의 숨겨진 값과 달리 숨겨진 개체를 위한 물리적 공간을 예약하지 않습니다.

인라인(display:inline;) 요소는 라인 레이아웃에 속하고 한 줄에 배치되는 특성이 있어 너비와 높이를 설정할 수 없으므로 너비와 높이를 설정할 수 없습니다.
123

출력: 123


float:left | right를 설정하면 width 속성이 적용됩니다.

(Float)는 지정된 요소를 일반적인 문서 흐름에서 벗어날 수 있게 해주는 특별한 레이아웃 기능입니다. 그리고 FLOAT는 블록 수준 요소에 적용되어야 합니다. 즉, 인라인 태그에는 플로팅이 적용되지 않습니다. 즉, FLOAT가 적용되면 이 요소는 블록 수준 요소로 지정됩니다.
123

출력: 123