표시와 함께 입력: 블록은 블록이 아닙니다. 왜 안 됩니까?
왜 그럴까요?display:block;width:auto;내 텍스트 입력에서 디브처럼 행동하지 않고 컨테이너 폭을 채우지 않습니까?
디브는 단순히 자동 너비를 가진 블록 요소라는 인상을 받았습니다.다음 코드에서는 div와 입력의 치수가 같지 않아야 합니까?
폭을 채우기 위한 입력은 어떻게 해야 합니까?입력에 패딩과 테두리(최종 너비 1픽셀 + 5픽셀 + 100% + 5픽셀 + 1픽셀)가 있기 때문에 100% 너비가 작동하지 않습니다.고정 폭은 선택 사항이 아니며, 좀 더 유연한 것을 찾고 있습니다.
저는 해결책에 대해 직접적인 답변을 원합니다.이것은 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 셀렉터 관계에 대한 이러한 스크루닝과는 별개로, 저는 문제의 본질과 INPUT 자체의 본질을 변경함으로써 극복할 수 있는지에 대해 이해하려고 합니다.
좋아요, 정말 이상하네요!해결책은 단순히 다음을 추가하는 것임을 알게 되었습니다.max-width:100%에 대한 입력에.width:100%;padding:5px;. 그러나 이것은 훨씬 더 많은 질문을 제기하지만(따로 질문하겠습니다), 너비는 일반 CSS 상자 모델을 사용하고 최대 너비는 Internet Explorer 테두리 상자 모델을 사용하는 것으로 보입니다.참 이상하군요.
네, 마지막 하나는 파이어폭스 3의 버그로 보입니다.Internet Explorer 8과 Safari 4는 규격에 따라 최대 너비를 100% + 패딩 + 테두리로 제한합니다.마침내 인터넷 익스플로러가 뭔가를 알아냈습니다.
세상에, 대박!이것을 가지고 노는 과정에서, 그리고 존경하는 학자 Dean Edwards와 Erik Arvidsson의 많은 도움으로, 저는 임의의 패딩과 테두리를 가진 요소들에 대해 진정한 크로스 브라우저 폭을 100% 만들 수 있는 세 가지 다른 해결책을 짜맞출 수 있었습니다.아래 답변 참조.이 솔루션은 기존 Internet Explorer에 대한 추가 HTML 마크업, 클래스(또는 셀렉터) 및 선택적 동작만 필요로 하지 않습니다.
제가 생각해낸 것, 상대적으로 알려지지 않은 것을 이용한 해결책을 확인해보세요.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>
이 솔루션은 Dean Edwards의 일부 수정을 통해 Internet Explorer 6 및 Internet Explorer 7을 지원합니다.
텍스트 입력의 크기는 텍스트 입력의 크기 속성에 따라 결정되기 때문입니다.<입력> 태그 안에 size="50"을 추가합니다.그런 다음 크기="100"으로 변경합니다. 무슨 뜻인지 알겠어요?
더 나은 해결책이 있을 것 같지만, SO: 입력 대신 컨텐츠 편집이 가능한 디브를 사용하십시오.사용자 입력을 동봉 양식에 전달하는 것은 다소 어려울 수 있습니다.
가장 좋은 방법은 입력을 경계, 여백 등으로 디브로 감싸고 입력을 너비 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>
스타일에 추가:
box-sizing: border-box;
가짜로 만들 수도 있어요, 이런 식으로.
<!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>
시도해 보기:
form { padding-right: 12px; overflow: visible; }
input { display: block; width: 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>
.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>
언급URL : https://stackoverflow.com/questions/1030793/input-with-displayblock-is-not-a-block-why-not
'source' 카테고리의 다른 글
| SQL에서 "AS" 키워드를 사용하지 않고 앨리어싱을 할 수 있는데 무슨 의미가 있습니까? (0) | 2023.09.16 |
|---|---|
| Oracle로 Ruby on Rails를 구성하는 방법은 무엇입니까? (0) | 2023.09.11 |
| WooCommerce에서 맞춤 주문 상태로 Pay Now URL을 얻는 방법은? (0) | 2023.09.11 |
| 별도의 스레드 풀에서 실행되는 스프링 부트 액추에이터 (0) | 2023.09.11 |
| CSS 확인란 입력 스타일 (0) | 2023.09.11 |