Вход с дисплеем: блок не является блоком, почему бы и нет?
Почему display:block;width:auto; на моем вводе текста не ведет себя как 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, а max-width использует модель пограничного окна Internet Explorer. Как очень странно.
Хорошо, эта последняя кажется ошибкой в Firefox 3. Internet Explorer 8 и Safari 4 ограничивают максимальную ширину до 100% + дополнение + границу, что и говорит спекуляция. Наконец, Internet Explorer получил что-то правильное.
Боже мой, это здорово! В процессе игры с этим и с большой помощью от почтенных гуру Дин Эдвардс и Эрик Арвидсон, мне удалось собрать три отдельных решения, чтобы сделать истинную кросс-браузерную 100-процентную ширину на элементах с произвольным заполнением и границами. См. Ответ ниже. Это решение не требует дополнительной разметки HTML, просто класс (или селектор) и необязательное поведение для устаревшего Internet Explorer.
Ответы
Ответ 1
Посмотрите, что я придумал, решение с использованием относительно неизвестного стиля box-sizing:border-box из CSS 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 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>
Это решение поддерживает Internet Explorer 6 и Internet Explorer 7 через поведение, написанное Эриком Арвидсоном, с некоторыми настройками Дина Эдвардса для поддержки процента и других непиксельных ширины.
Рабочий пример
Поведение (boxsizing.htc)
Ответ 2
Причина этого в том, что размер ввода текста определяется его атрибутом размера. добавьте размер = "50" внутри <input> тег. Затем измените его на size = "100" - посмотрите, что я имею в виду?
Я подозреваю, что есть лучшее решение, но единственное, что приходит на ум, - это то, что я нашел в вопросе "Скрытые особенности HTML" на SO: используйте редактируемый для контента div вместо ввода. Передача пользовательского ввода в прилагаемую форму (если это необходимо) может быть немного сложной.
Скрытые функции HTML
Ответ 3
Лучше всего обернуть ввод в 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>
Ответ 4
Вы можете подделать это, например:
<!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>
Ответ 5
Также вы можете подделать его, например:
<!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>
Ответ 6
Попробуйте следующее:
form { padding-right: 12px; overflow: visible; }
input { display: block; width: 100%; }
Ответ 7
У меня была та же проблема. Я добавил границу к моим входам, поэтому они стали блоками.
