스팬 폭 설정

不言

풀어 주다： 2018-06-12 11:43:30

원래의

2002명이 탐색했습니다.

HTML에서 범위 너비를 설정하는 방법은 무엇입니까? 이건 아주 간단한 문제인 것 같습니다. width 속성을 스타일에 활용하면 될 것 같습니다.

범위의 너비 설정은 기본적으로 유효하지 않습니다.
HTML에서 범위의 너비를 설정하는 방법은 무엇입니까? 이건 아주 간단한 문제인 것 같습니다. width 속성을 스타일에 활용하면 될 것 같습니다. 예를 들어

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>Test Span</title> 
<style type="text/css"> 
span { 
background-color:#ffcc00; 
width:150px; 
} 
</style> 
</head> 
<body> 
fixed <span>width</span> span 
</body> 
</html>

로그인 후 복사

는 테스트 후 Firefox나 IE에서 작동하지 않는 것을 발견했습니다.

CSS2 표준의 너비 정의를 참고하여 CSS의 너비 속성이 항상 유효한 것은 아니라는 사실을 발견했습니다. 개체가 인라인 개체인 경우 너비 속성이 무시됩니다. Firefox와 IE는 원래 표준을 준수하여 이 작업을 수행했습니다.
스팬을 블록 유형으로 수정하고 부동소수점을 설정하는 것은 완벽한 솔루션이 아닙니다
스팬의 CSS에 표시 속성을 추가하고 스팬을 블록 유형의 요소로 설정하면 너비가 실제로 효과적이지만 또한 분리됩니다. 다른 줄의 앞뒤 텍스트. 이런 식으로, 스팬은 실제로 완전히 p가 됩니다.

span { background-color:#ffcc00; display:block; width:150px; }

로그인 후 복사

많은 사람들이 특정 조건에서 실제로 문제를 해결할 수 있는 또 다른 CSS 속성 float를 추가할 것을 제안합니다. 예를 들어, 우리 예에서는 스팬 앞에 텍스트가 없으면 실제로 가능합니다. 하지만 있다면 앞과 뒤의 텍스트가 함께 연결되어 스팬은 두 번째 줄까지 실행됩니다.

span { 
background-color:#ffcc00; 
display:block; 
float:left; 
width:150px; 
}

로그인 후 복사

버튼 상황
사실 HTML의 다양한 요소 중에 인라인이면서도 너비를 설정할 수 있는 상황이 실제로 있습니다. 예를 들어, 다음 코드는 텍스트 중간에 표시되고 너비를 설정할 수 있는 버튼 객체를 표시합니다.

<body> 
fixed <button style="width:150px;">width</button> button 
</body>

로그인 후 복사

스팬을 버튼처럼 표시할 수 있나요? CSS2 표준의 표시 정의 및 인라인 객체에 대한 설명을 통해 CSS2 표준 작성자는 모든 요소가 인라인에 속하는지, 인라인에 속하는지 블록에 속하는지에 대해 규정을 만들어 놓았으나 그런 것은 없음을 확인했습니다. 버튼으로 인라인으로 블록과 같은 너비 속성 값을 설정할 수 있습니다.

업데이트된 표준 CSS 2.1

업데이트된 표준을 보면 CSS2.1 표준 초안의 디스플레이 정의에 inline-block이라는 속성 값이 추가되었는데, 이것이 바로 우리가 직면하고 있는 상황입니다. 그런 다음 다양한 브라우저의 해당 상황을 살펴보세요.

Firefox

앞으로 Firefox 3에서 inline-block이 구현될 것이라는 디스플레이 문서를 통해 배웠습니다. Mozllia 확장 속성 참조를 통해 현재 Firefox 2와 같은 Firefox 3 이전 버전에서는 -moz-inline-box를 사용하여 동일한 효과를 얻을 수 있다는 것을 알게 되었습니다.

IE

MSDN의 디스플레이 문서에서 인라인 블록이 구현되었다는 사실을 알게 되었습니다. 실제 테스트 결과 IE 6.0 이후에는 문제가 없는 것으로 확인되었습니다.

완벽한 솔루션

다음 코드의 CSS 정의는 범위 너비 설정 문제를 완벽하게 해결합니다. 브라우저는 일반적으로 지원되지 않는 CSS 속성을 무시하므로 마지막에 display:inline -block 줄을 작성하는 것이 가장 좋습니다. 그러면 Firefox에서 향후 Firefox 3에 도달하면 이 줄이 다양한 버전과 호환될 수 있습니다. 동시에.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>Test Span</title> 
<style type="text/css"> 
span { 
background-color:#ffcc00; 
display:-moz-inline-box; 
display:inline-block; 
width:150px; 
} 
</style> 
</head> 
<body> 
fixed <span>width</span> span 
</body> 
</html>

로그인 후 복사

위 내용은 모두의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!