디스플레이가있는 입력 : 블록이 블록이 아닌 이유는 무엇입니까?

139

내 텍스트 입력에 display:block;width:auto;이 div처럼 동작하지 않고 컨테이너 너비를 채우지 않는 이유는 무엇입니까?디스플레이가있는 입력 : 블록이 블록이 아닌 이유는 무엇입니까?

div는 단순히 자동 너비가있는 블록 요소라는 인상하에있었습니다. 다음 코드에서 div와 입력의 치수가 같지 않아야합니까?

너비를 채우려면 입력을 어떻게 받습니까? 입력에 패딩과 테두리가 있기 때문에 100 % 너비가 작동하지 않습니다. 최종 너비는 1 픽셀 +5 픽셀 + 100 % + 5 픽셀 + 1 픽셀입니다. 고정 너비는 옵션이 아니며 좀 더 융통성있는 것을 찾고 있습니다.

해결 방법에 대한 직접적인 대답을 선호합니다. 이것은 CSS 버크 (quirk)와 같아서 나중에 이해하는 것이 유용 할 수 있습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <title>width:auto</title> 

     <style> 
     div, input { 
      border: 1px solid red; 
      height: 5px; 
      padding: 5px; 
     } 
     input, form { 
      display: block; 
      width: auto; 
     } 
     </style> 
    </head> 

    <body> 
     <div></div> 
     <form> 
      <input type="text" name="foo" /> 
     </form> 
    </body> 
</html>

이미 래퍼 문제를 해결할 수 있음을 지적해야합니다. 페이지 의미론과 CSS 선택기 관계에 대한 문제로 인해 문제의 본질과 입력 자체의 특성을 변경하여 극복 할 수 있는지 여부를 이해하려고 노력하고 있습니다.

좋습니다. 이것은 이상합니다! 나는 해결책이 width:100%;padding:5px;과 함께 입력에 max-width:100%을 단순히 추가하는 것임을 발견했다. 그러나 이것은 더 많은 질문을 제기하는데 (나는 별도의 질문으로 질문 할 것입니다.) 폭은 일반 CSS 상자 모델을 사용하고 최대 너비는 인터넷 탐색기 테두리 상자 모델을 사용하는 것으로 보입니다. 얼마나 이상합니다. 좋아

는, 마지막 하나는 파이어 폭스 3. 인터넷 익스플로러 8 사파리 에서 버그가 수 있도록 나타납니다 4 제한 사양이 할 말하는 100 % + 패딩 + 국경에 최대 폭. 마지막으로, 인터넷 탐색기에 뭔가 맞는 것이 있습니다.

오 마이 갓, 이거 최고예요! 이 과정을 진행하면서 훌륭한 전문가 인 Dean Edwards과 Erik Arvidsson의 많은 도움을 받아 필자는 임의의 패딩과 테두리가있는 요소에서 진정한 크로스 브라우저 100 % 너비를 만들기 위해 세 가지 솔루션을 하나로 모았습니다. 아래 답변을 참조하십시오. 이 솔루션은 여분의 HTML 마크 업, 클래스 (또는 선택기) 및 레거시 인터넷 탐색기에 대한 선택적 동작을 필요로하지 않습니다.

출처

2009-06-23 SpliFF

정확한 중복 [http://stackoverflow.com/questions/628500/can-i-stop-100-width-text-boxes-from-extending-beyond-their-containers ] (http://stackoverflow.com/questions/628500/can-i-stop-100-width-text-boxes-from-extending-beyond-their-containers) –

@SleepyCod는 정확한 복제본이 아닙니다. 이 질문은 CSS 2.1 사양을 준수하지 않는 'input'요소의 문제를 다루는 반면, 링크 된 질문은 CSS 2.1 사양의 범위 내에서 완벽하게 발생하는 상자 오버플로를 방지하는 방법을 묻습니다. 질문과 솔루션은 중복되지만 정확한 중복을 부르는 것은 ** 잘못된 것입니다. ** – amn

123

내가 무엇을 체크 아웃 나에게 위로, CSS 에서 상대적으로 알려지지 않은 box-sizing:border-box 스타일을 사용하는 해결책 3. 이것은 요소의 패딩이나 테두리에 관계없이 모든 요소에서 '참'100 % 너비를 허용합니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 

     <title>Cross-browser CSS box-sizing:border-box</title> 

     <style type="text/css"> 
      form {display:block; margin:0; padding:0; width:50%; border:1px solid green; overflow:visible} 
      div, input {display:block; border:1px solid red; padding:5px; width:100%; font:normal 12px Arial} 

      /* The voodoo starts here */ 
      .bb { 
       box-sizing: border-box; /* CSS 3 rec */ 
       -moz-box-sizing: border-box; /* Firefox 2 */ 
       -ms-box-sizing: border-box; /* Internet Explorer 8 */ 
       -webkit-box-sizing: border-box; /* Safari 3 */ 
       -khtml-box-sizing: border-box; /* Konqueror */ 
      } 
     </style> 

     <!-- The voodoo gets scary. Force Internet Explorer 6 and Internet Explorer 7 to support Internet Explorer 5's box model --> 
     <!--[if lt IE 8]><style>.bb {behavior:url("boxsizing.htc");}</style><![endif]--> 
    </head> 

    <body> 
     <form name="foo" action="#"> 
      <div class="bb">div</div> 
      <input class="bb" size="20" name="bar" value="field"> 
     </form> 
    </body> 
</html>

이 용액 백분율 및 다른 비 화소 폭을 지원하도록 딘 에드워즈 일부 비틀기와 에릭 아르 비드 슨 작성한 동작을 통해 인터넷 익스플로러 6 및 인터넷 익스플로러 7을 지원한다. 의

Working example
Behaviour (boxsizing.htc)

출처

2009-06-23 16:36:13 SpliFF

+12

내가 할 수 있으면 나는이 대답을 1000 번 upvote 것이다. –

당신은 천재입니다. – GeReV

이것은 놀라운 솔루션처럼 보이지만 IE8에서는 작동하지 않습니다 (div 및 필드 상자가 충분히 넓지는 않음). 이 방법에 대한 업데이트가 있는지 알고 있습니까? 감사! – rocketmonkeys

가장 좋은 방법은,

등 당신의 테두리, 여백,로 사업부에 입력을 포장, 폭 100 % 내부의 입력없이 테두리, 여백 등을 예를 들어

을하는 것입니다

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <title>width:auto</title> 

     <style> 
      div { 
       border: 1px solid red; 
       padding: 5px; 
      } 
      input, form { 
       display: block; 
       width: 100%; 
      } 
     </style> 
    </head> 

    <body> 
     <form> 
      <div><input type="text" name="foo" /></div> 
     </form> 
    </body> 
</html>

출처

2009-06-23 05:52:27

그래, 작동하지만 대답보다 해결 방법이 더 많습니다. 입력이 블록 동작을 무시하는 이유를 설명하려고합니다. – SpliFF

Jonathan, 여기에 명백한 무례 함을 용서해주십시오. 그러나 오른쪽 (tm) 대답을 찾고 여기에 와서 @SpliFF가 구체적으로 언급 한 부분을 읽으면서 기꺼이 읽습니다. "해결 방법에 대한 직접 응답을 선호하지만 아직 다른 과잉 (인터넷의 다른 곳에서나 다른 곳에서도 여러 번 반복됨)으로 질문에 대한 계약을 무시하는 것처럼 보입니다. ** - 왜? ** ** 사전에 감사드립니다 .- 화려하게. – amn

텍스트 입력의 크기가 size 속성에 의해 결정되는 이유가 여기에 있습니다. < 입력 > 태그 안에 size = "50"을 추가하십시오. 그런 다음 size = "100"으로 변경하십시오. 무슨 뜻인지 알겠습니까?

거기에 더 나은 해결책이 있다고 생각하지만 마음에 떠오르는 유일한 질문은 "HTML의 숨겨진 기능"질문에서 찾을 수 있습니다. SO : 입력 대신 콘텐츠 편집 가능한 div를 사용하십시오. 사용자 입력을 둘러싼 양식에 전달하면 (필요한 경우) 약간 힘들 수 있습니다.

Hidden features of HTML

출처

2009-06-23 06:00:27 MatrixFrog

나는 ' 나는 CSS 사람들이 이것을 어떻게 정당화하는지 알고 싶어한다. 너비가 픽셀/백분율로 크기를 명시 적으로 오버라이드 할 수 있다면 요소가 블록 일 때 왜 계속 명예를 줘야하는지 모르겠다. – SpliFF

그러나 'button'은 잘'size' 속성을 가지고 있지 않습니까? – zanona

이 답변과 같이 "왜 이렇게 표준인가"부분에 더 초점을 맞추는 질문 : http://stackoverflow.com/questions/4567988/what-is-it -in-the-css-dom-that-pr events-an-input-box-with-ex 앞에서 주장한 바는 input이 대체 된 요소이기 때문이다. –

당신은 가짜,이 같은 수 :

또한

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <title>width:auto</title> 

     <style> 
     div, #inputWrapper { 
      border: 1px solid red; 
     } 
     #topDiv { 
      padding: 5px; 
      height: 5px; 
     } 
     form { 
      display: block; 
     } 
     #inputWrapper { 
      overflow: hidden; 
      height: 15px; 
     } 
     input { 
      display: block; 
      width: 100%; 
      border-style: none; 
      padding-left: 5px; 
      padding-right: 5px; 
      height: 15px; 
     } 
     </style> 
    </head> 

    <body> 
     <div id="topDiv"></div> 
     <form> 
      <div id="inputWrapper"> 
      <input type="text" name="foo" /> 
      </div> 
     </form> 
    </body> 
</html>

출처

2009-06-23 06:00:32 Jacob

나는 가짜 접근법을 과거에했지만 솔직히 말해서 나는 그것을 아프게하고있다. 나는 입력을 얻기 위해 99 % 너비를 사용하는 것과 같은 모든 지체 된 해킹으로 끝나고 일치하도록 선택합니다. div와 같은 입력을 처리하는 방법이 정말 필요하며 방금 뭔가를 간과했으면합니다. – SpliFF

입력이 여전히 내부 너비가있는 너비 : 100 %이기 때문에 inputWrapper가 오버플로됩니다. – SpliFF

당신은 가짜,이 같은 수 :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <title>width:auto</title> 

     <style> 

      .container { 
       width:90%; 
      } 

      .container div{ 
       border: 1px solid red; 
       padding: 5px; 
       font-size:12px; 
       width:100%; 
      } 

      input{ 
        width:100%; 
       border: 1px solid red; 
       font-size:12px; 
       padding: 5px; 
      } 

      form { 

       margin:0px; 
       padding:0px; 
      } 

     </style> 
    </head> 

    <body> 
     <div class="container"> 
      <div> 
       asdasd 
      </div> 
      <form action=""> 
       <input type="text" name="foo" /> 
      </form> 
     </div> 
    </body> 
</html>

출처

2009-06-23 06:06:06 AlexC

위와 같은 가능성이 있으므로 너비가 100 % 인 내부 패딩이 있습니다. 그것은 오버 플로우 할 것이다. – SpliFF

당신은 자바 스크립트 – AlexC

을이 시도 :

form { padding-right: 12px; overflow: visible; } 
input { display: block; width: 100%; }

출처

2009-06-23 08:48:38 Mike

으로 이것을 할 수 있습니다. 당신은 입력 패딩과 경계를 벗어났습니다. 네가하는 일을 깨닫기 전 까진 네가 틀렸다는 말을하려고했다. 이제 저는 메르 쿠로가하려고했던 것을 얻었습니다 (그의 코드는 여전히 잘못되었지만 거의 개념이있었습니다). 패딩 오른쪽은 12px (입력의 테두리 + 패딩)로 100 %의 의미를 변경합니다.그러나이 접근 방법의 단점은 양식의 다른 모든 어린이도 패딩의 영향을받으며이를 보완해야한다는 것입니다. – SpliFF

디스플레이가있는 입력 : 블록이 블록이 아닌 이유는 무엇입니까?

답변

관련 문제