display : block 입력은 블록이 아닙니다. 왜 그렇지 않습니까?

153

display:block;width:auto;텍스트 입력에서 div처럼 동작하지 않고 컨테이너 너비를 채우는 이유는 무엇 입니까?

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

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

해결 방법에 대한 직접적인 답변을 선호합니다. 이것은 CSS 기발한 것처럼 보이고 나중에 이해하는 것이 좋습니다.

<!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 선택기 관계를 이용한 이러한 문제 외에도 문제의 본질과 INPUT 자체의 본질을 변경하여 극복 할 수 있는지 여부를 이해하려고합니다.

좋아, 이것은 정말로 이상하다! 해결책은 단순히 max-width:100%로 입력에 추가 하는 것입니다 width:100%;padding:5px;. 그러나 이것은 더 많은 질문을 제기하지만 (별도의 질문으로 할 것입니다) 너비는 일반적인 CSS 상자 모델을 사용하고 최대 너비는 Internet Explorer 테두리 상자 모델을 사용하는 것 같습니다. 얼마나 이상한가.

마지막으로 Firefox 3에서는 버그로 보입니다. Internet Explorer 8 및 Safari 4는 최대 너비를 100 % + padding + border로 제한합니다. 마지막으로 Internet Explorer에는 올바른 것이 있습니다.

세상에, 이거 대단해! 이것을 사용하는 과정에서, 유명한 전문가 인 Dean Edwards 와 Erik Arvidsson 의 많은 도움을 받아 임의의 패딩과 테두리가있는 요소에서 진정한 크로스 브라우저 너비 100 %를 만들기 위해 세 가지 별도의 솔루션을 함께 만들었습니다. 아래 답변을 참조하십시오. 이 솔루션에는 추가 HTML 마크 업이 필요하지 않으며 클래스 (또는 선택기) 및 레거시 Internet Explorer의 선택적 동작이 필요합니다.

html css

— SpliFF
소스

http://stackoverflow.com/questions/628500/can-i-stop-100-width-text-boxes-from-extending-beyond-their-containers의

— Christophe Eblé

7

@SleepyCod는 정확히 중복되지 않습니다. 이 질문은 inputCSS 2.1 사양을 준수하지 않는 요소 의 문제를 다루는 반면 링크 된 질문은 CSS 2.1 사양의 범위 내에서 완벽하게 발생하는 넘침 상자를 방지하는 방법을 묻습니다. 질문과 솔루션이 모두 겹치지 만 정확한 복제본을 호출하는 것은 단순히 잘못되었습니다.

— amn

130

box-sizing:border-boxCSS 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>

이 솔루션은 Erik Arvidsson이 작성한 동작을 통해 Internet Explorer 6 및 Internet Explorer 7을 지원합니다. Dean Edwards의 비틀기 및 기타 비 픽셀 너비를 지원하기 위해 약간의 조정이있었습니다.

작업 예
동작 (boxsizing.htc)

— SpliFF
소스

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

— rocketmonkeys

2

Schepp의이 polyfill은 github에서 더 많은 경우를 처리하고 IE8과 작동하도록 IE6 / 7 polyfill을 업데이트합니다. github.com/Schepp/box-sizing-polyfill

— nicjohnson

감사! <input type = text>와 <input type = submit>이 모두 너비를 300px로 설정했을 때 너비가 다른 이유를 해결할 수 없었습니다. 이것은 그것을 해결했다! 2 년 후에도 최신 버전의 Firefox에는 여전히 -moz- 접두사를 사용해야합니다. caniuse.com/#feat=css3-boxsizing

— 대런 쿡

4

불행하게도,이 접근 방식은 여백을 추가해야하는 경우 래퍼 div를 제거하는 데 사용할 수 없습니다 (너비가 100 % 인 경우 여백이 모든 요소에서 올바르게 작동하지 않기 때문에)

— SystemParadox

6

그래도 문제는 해결되지 않습니다. 예를 사용하는 경우 그것은 작동 width:100%하지만, 당신이 사용하는 경우 그렇지 않습니다 width:auto여기를 참조 : jsfiddle.net/hGuzE

— 니므롯

8

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

더 나은 해결책이 있다고 생각하지만 유념해야 할 유일한 것은 SO의 "HTML의 숨겨진 기능"질문에서 찾은 것입니다. 입력 대신 컨텐츠 편집 가능 div를 사용하십시오. 사용자 입력을 둘러싸는 양식으로 전달하는 것이 (필요한 경우) 약간 까다로울 수 있습니다.

HTML의 숨겨진 기능

— MatrixFrog
소스

8

CSS 사람들이 이것을 어떻게 정당화하는지 알고 싶습니다. 너비가 픽셀 / 백분율로 명시 적으로 크기를 무시할 수 있다면 요소가 블록 일 때 왜 너비를 계속 준수 해야하는지 알 수 없습니다.

— SpliFF 2016 년

1

그러나 속성 button이없는 것도 마찬가지 size입니까?

— zanona

1

이 답변과 같은 "이것이 왜 표준입니까?"부분에 더 초점을 둔 질문은 stackoverflow.com/questions/4567988/… 가장 중요한 주장 input은 대체 된 요소 이기 때문 입니다.

— Ciro Santilli 郝海东冠状病六四事件法轮功

7

가장 좋은 방법은 입력을 테두리, 여백 등으로 div로 감싸고 너비가 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>

— 조나단 핑 랜드
소스

1

그래, 그것은 효과가 있지만 그것은 대답보다 더 많은 해결 방법입니다. 입력이 블록 동작을 무시하는 것처럼 보이는 이유를 설정하려고합니다.

— SpliFF 2016 년

2

조나단, 내 명백한 무례 함을 용서해주십시오. 그러나 여기에 올바른 답변을 찾고 여기에 @SpliFF가 "해결 방법에 대한 직접적인 답변을 선호하지만 여전히 중복을 추가하는 부분을 언급하는 부분을 기쁘게 읽습니다. 겉으로는 질문의 계약을 무시하고 대답 (에서와 같이 SO에 다른 곳에서 인터넷에서 모두 여러 번 반복) 내가 당신을 요청할 수 있습니다 -. ? 왜 . 사전에 감사 -Curiously 당신을.

— AMN

1

다음과 같이 가짜로 만들 수 있습니다.

<!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>

— 야곱
소스

1

나는 과거에 가짜 접근법을 해왔지만 솔직히 말해서 아프다. 99 % 너비를 사용하여 입력을 얻고 일치하도록 선택하는 것과 같은 모든 종류의 지연된 핵으로 끝납니다. 나는 정말로 div처럼 입력을 처리하는 방법을 원하고 뭔가를 간과하기를 바랐습니다.

— SpliFF

2

또한 입력은 내부 패딩으로 너비가 100 %이므로 inputWrapper가 오버플로됩니다.

— SpliFF 2016 년

1

이 시도:

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

— 마이크
소스

1

입력 패딩과 테두리를 생략했습니다. 당신이하고있는 일을 깨달을 때까지 당신이 틀렸다고 말하려고했습니다. 이제 나는 merkuro가하려고했던 것을 얻습니다 (그의 코드는 여전히 잘못되었지만 개념은 거의 거기에있었습니다). 오른쪽 여백은 100 % x 12px (테두리 + 입력의 여백)의 의미를 변경합니다. 그러나이 방법의 단점은 다른 모든 형태의 자식이 패딩의 영향을 받기 때문에 보상해야한다는 것입니다.

— SpliFF 2016 년

1

또한 다음과 같이 가짜로 만들 수 있습니다.

<!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>

— AlexC
소스

1

위와 같은 확률로 100 % 너비의 내부 패딩이 있습니다. 오버플로됩니다.

— SpliFF 2016 년

당신은 자바 스크립트와 함께 이것을 할 수 있습니다

— AlexC

1

이것을 스타일에 추가하십시오 :

box-sizing: border-box;

— 존 포터
소스