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

Ответ 1

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

Ответ 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.

Если вы хотите прочитать больше эту блестящую статью Криса Койера.

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

Ответ 3

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

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

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

Ответ 4

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

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

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

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

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

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

В любом случае, мои два цента: не позволяйте идеализму встать на путь практичности в таких случаях.:) Решение David работает и вряд ли загромождает HTML вообще (и на самом деле использование семантических классных имен вроде "before" и "after" по-прежнему очень чистое imo).

Ответ 5

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

margin: -1em;

Ответ 6

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

Ответ 7

@Domenic это не работает. width auto не делает ничего больше, чем поведение по умолчанию этого элемента, потому что начальное значение ширины авто (см. стр. 164, Cascading Style Sheets Level 2 Revision 1 Specification). Присвоение отображения блока типов также не работает, это просто говорит браузеру использовать блок-блок при отображении элемента и не присваивает по умолчанию поведение как можно большего пространства, например, div (см. Стр. 121, Каскадный стиль Листы 2-го уровня версии 1). Это поведение обрабатывается визуальным пользовательским агентом, а не определением CSS или HTML.

Ответ 8

Отступ по умолчанию и граница будут препятствовать тому, чтобы ваше текстовое поле действительно составляло 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.