CSS: текстовое поле для заполнения родительского контейнера

Question

Я пытаюсь разрешить <input type="text"> (далее «текстовое поле») заполнить родительский контейнер, установив его width в 100%. Это работает, пока я не добавлю текстовое поле. Затем это добавляется к ширине содержимого и переполняется поле ввода. Обратите внимание, что в Firefox это происходит только тогда, когда контент соответствует стандартам. В режиме причуд, кажется, применима еще одна блочная модель.

Вот минимальный код для воспроизведения поведения во всех современных браузерах.

#x {
  background: salmon;
  padding: 1em;
}

#y, input {
  background: red;
  padding: 0 20px;
  width: 100%;
}

<div id="x">
  <div id="y">x</div>
  <input type="text"/>
</div>

Мой вопрос: Как сделать так, чтобы текстовое поле соответствовало контейнеру?

Обратите внимание : для <div id="y"> это просто: просто установите width: auto. Однако, если я попытаюсь сделать это для текстового поля, эффект будет другим, и текстовое поле будет считать ширину строки по умолчанию в качестве ширины (даже если я установил display: block для текстового поля).

/ РЕДАКТИРОВАТЬ: «Решение» Дэвида, конечно, будет работать. Тем не менее, я не хочу изменять HTML - я особенно не хочу добавлять фиктивные элементы без семантической функциональности. Это типичный случай divitis , которого я хочу избежать любой ценой. Это может быть только последним взломом.

Answer 1

Вы можете заключить текстовое поле в <div> и дать ему <div> padding: 0 20px. Ваша проблема в том, что ширина 100% не включает в себя значения отступов или полей; эти значения добавляются поверх ширины 100%, что приводит к переполнению.

Answer 2

С помощью CSS3 вы можете использовать свойство box-sizing на ваших входах, чтобы стандартизировать их блочные модели. Примерно так можно добавить отступы и иметь ширину 100%:

input[type="text"] {
    -webkit-box-sizing: border-box; // Safari/Chrome, other WebKit
    -moz-box-sizing: border-box;    // Firefox, other Gecko
    box-sizing: border-box;         // Opera/IE 8+
}

К сожалению, это не сработает для IE6 / 7, но в остальном все в порядке ( Список совместимости ), поэтому, если вам потребуется поддержка этих браузеров, лучшим вариантом будет решение Davids.

Если вы хотите узнать больше, прочитайте эту замечательную статью Криса Койера .

Надеюсь, это поможет!

Answer 3

Из-за способа определения и реализации Box-Modell я не думаю, что есть решение css-only для этой проблемы. (Помимо того, что Мэтью описал: использование процента также для заполнения, например, ширина: 94%; заполнение: 0 3%;)

Однако вы могли бы создать некоторый Javascript-код для динмического вычисления ширины при загрузке страницы ... хм, и это значение, конечно, также необходимо будет обновлять каждый раз при изменении размера окна браузера.

Интересный побочный продукт некоторых тестов, которые я провел: Firefox делает устанавливает ширину поля ввода на 100%, если дополнительно на width: 100%;, вы также устанавливаете max-width на 100%. Это не работает в Opera 9.5 или IE 7 (не проверял более старые версии).

Answer 4

Это, к сожалению, невозможно с чистым CSS; Модификации HTML или Javascript необходимы для любого нетривиального гибкого, но ограниченного поведения пользовательского интерфейса. CSS3-столбцы помогут в этом отношении, но не в таких сценариях, как ваш.

Решение Давида самое чистое. Это на самом деле не случай дивитита - вы не добавляете кучу дивов без необходимости, или не даете им имена классов, такие как «p» и «h1». Он служит определенной цели, и в этом случае приятно то, что это также расширяемое решение, например Вы можете добавить закругленные углы в любое время, не добавляя ничего дальше. На доступность также не влияют, так как они пустые div.

Кстати, вот как я реализую все свои текстовые поля:

<div class="textbox" id="username">
    <div class="before"></div>
    <div class="during">
        <input type="text" value="" />
    </div>
    <div class="after"></div>
</div>

Теперь вы можете свободно использовать CSS для добавления закругленных углов, добавления отступов, как в вашем случае, и т. Д., Но вам также не нужно - вы можете полностью скрыть эти боковые элементы и иметь только обычный текстовый блок ввода.

Другими решениями являются использование таблиц, например, Amazon использует таблицы, чтобы получить гибкий, но ограниченный макет, или использовать Javascript для настройки размеров и обновления их при изменении размеров окна, например, Google Docs, Maps и т. Д. Все это делают.

В любом случае, мои два цента: не позволяйте идеализму мешать практичности в подобных случаях. :) Решение Дэвида работает и практически не загромождает HTML (и на самом деле использование семантических имен классов, таких как «до» и «после», все еще очень чистая вещь).

Answer 5

@ Доменик это не работает. width auto не делает ничего, кроме поведения по умолчанию для этого элемента, поскольку начальное значение width равно auto (см. стр. 164, Спецификация каскадных таблиц стилей, уровень 2, редакция 1). Назначение отображения блока типа также не работает, это просто говорит браузеру использовать блок блока при отображении элемента и не назначает поведение по умолчанию, занимая как можно больше места, как у div (см. Стр. 121, Cascading Style Спецификации уровня 2 редакции 1). Такое поведение обрабатывается визуальным агентом пользователя, а не определением CSS или HTML.

Answer 6

Это поведение вызвано различными интерпретациями блочной модели. В правильной блочной модели указано, что ширина применяется только к содержимому, а к нему добавляются отступы и поля. Таким образом, вы получаете 100% плюс 20px правый и левый отступы, равные 100% + 40px как общая ширина. Оригинальная блочная модель IE, также известная как режим причуд, включает отступы и поля в ширину. Таким образом, ширина вашего контента в этом случае будет 100% - 40px. Вот почему вы видите два разных поведения. Насколько я знаю, решения для этого не существует, однако есть обходной путь, задав ширину, скажем, 98%, а отступы - 1% с каждой стороны.

Answer 7

Заполнение и границы по умолчанию не позволят вашему текстовому полю быть действительно 100%, поэтому сначала вы должны установить их в 0:

input {
    background: red;
    padding: 0;
    width: 100%;
    border: 0; //use 0 instead of "none" for ie7 
}

Затем поместите вашу рамку и любой требуемый отступ или отступ в поле div вокруг текстового поля:

.text-box {
    padding: 0 20px;
    border: solid 1px #000000;
}

<body>
    <div id="x">
        <div id="y">x</div>
        <div class="text-box"><input type="text"/></div>
    </div>
</body>

Это должно позволить вашему текстовому полю быть расширяемым и иметь желаемый размер без JavaScript.

Answer 8

Я считаю, что вы можете противодействовать переполнению с отрицательной маржей. т.е.

margin: -1em;