1. 홈
  2. 질의 응답
  3. INPUT 및 SELECT 요소 맞춤 크기

INPUT 및 SELECT 요소 맞춤 크기

2009-05-30 4 views
1

폭/패딩/여백 속성은 블록 수준 요소에서만 작동합니다. 그러나 INPUT 및 SELECT 요소에서 너비를 지정할 수 있습니다. 그럴까요?INPUT 및 SELECT 요소 맞춤 크기

나는 이런 걸 쓸 수

:

<input type="text" style="display:block;" />

을하지만이 필요하다?

아무도 설명해 주시겠습니까?

출처

2009-05-30 User

답변

4

실제로는 인라인 요소가 아니고 인라인 블록 요소입니다. 이를 통해 인라인 요소의 흐름을 중단하지 않고 너비, 높이 및 기타 블록 특정 속성을 지정할 수 있습니다. In good browsers "display : inline-block"을 사용하여 동일한 요소를 얻을 수 있습니다.

출처

2009-05-30 09:19:17

+0

광범위한 테스트는 아니지만 적어도 Firefox 3에서는 input 요소의 계산 된 스타일 (작성자 스타일을 변경하지 않고)은 display : inline - inline-block이 아닙니다. – Quentin

+0

@David, 네, 맞습니다. Mozilla가 "display : -moz-inline-box"를 내부적으로 사용한다고 가정했는데 (어떤 증거도 찾을 수 없었습니다). 필자는 일부 테스트를 수행했으며 IE8 및 Chrome2는 SELECT 요소에 대해 "인라인 블록"을보고하고 Opera9는 "인라인"을보고합니다. 즉, 귀하의 대답은 정확한 답변이라고 생각하지만, 그러한 요소에 대해서는 "display : inline-block"으로 가정하는 것이 안전합니다. –

-1

불가능한 일이 있었습니까? INPUT 요소가 도입되었을 때 CSS가 없었습니다. 적절한 양식을 만들기 위해서는 HTML에서 INPUT 요소의 너비가 절대적으로 필요합니다.

출처

2009-05-30 09:01:05 Thinker

+0

내가보기 ... 요즘하는 것이 적절한 방법은 무엇입니까? display : block을 지정하거나 이러한 요소를 역사적인 예외로 간주합니까? – User

+0

표시 : 어떤 이유로 인해 필요할 경우에만 블록을 사용해야합니다. – Thinker

0

기술적를, 그 브라우저 별 인 렌더링 재산입니다. 이 시점에서 대부분의 브라우저는 너비를 설정할 수 있지만, 특히 오래된 브라우저에서는 보장 할 수 없으며 확실히 은으로 버그를 처리 할 수 ​​있습니다.

입력 요소의 W3 사양은 기술적으로 인라인 요소로 만듭니다. 인라인 블록은 W3 사양의 일부조차도 아니며 CSS2의 일부이기도합니다 (따라서 오래된 브라우저는 일관성이 없습니다).

너비를 백분율로 지정하고 전체 텍스트를 넣으면 IE에 재미있는 버그가 있습니다 (예 :).

짧게 말해서, 거의 항상 안전합니다. 본 공식 사양에는 포함되지 않습니다.

출처

2009-05-30 09:45:35

4

The spec says :

적용 대상 : 이러한 입력으로 모든 요소이지만 비 치환 인라인 요소 테이블 행과 행 그룹

폼 제어, 선택 요소 는 인라인 대체 요소 (요소는 양식 컨트롤로 대체됩니다. 텍스트 콘텐트는 일반 요소처럼 표시되지 않습니다).

대체되었으므로 교체되지 않으므로 width 속성이 적용됩니다.

출처

2009-05-30 19:36:57 Quentin

관련 문제

 관련 문제