Поле ввода шириной 100% «доходит» до заполнения - PullRequest
Новая
       16

Поле ввода шириной 100% «доходит» до заполнения

3 голосов
/ 30 марта 2011

У меня есть Tablecell с полем ввода в нем.Поле ввода должно заполнять ячейку таблицы, но не доходить до ее заполнения.То, что у меня выглядит, выглядит следующим образом (с помощью firebug):

Form Element reaching into padding

Я хочу, чтобы поле ввода оставалось внутри синей области, а не переходило в фиолетовую.

И: Конечно, я сначала прочитал все вопросы по этой теме.Я прочитал все это, и я не мог найти никакого ответа, который бы на самом деле решил это.

Он должен работать во всех современных браузерах (в том числе и 7);

Я сделал минимальный живойПример с jsfiddle, где я попробовал все решения в других вопросах, но я просто не мог заставить это работать.а) Есть ли рабочее решение для этого? и б) Есть ли даже хорошее и не обходное решение для этого?

Почему это проблема ввсе браузеры?Я думаю, что это неправильная спецификация в CSS.Потому что, если я говорю «100%», конечно, я хочу, чтобы элемент соответствовал «100%» области CONTENT. Какой вариант использования, чтобы позволить этому течь в отступы и поля?

Ответы [ 3 ]

5 голосов
/ 31 марта 2011

Ну вот, пожалуйста ...

Я использую точный тот же метод, что и этот ответ .

См .: http://jsfiddle.net/AKUsB/

CSS: 

.inputContainer {
    background: #fff;
    padding: 3px 3px;
    border: 1px solid #a9a9a9
}
.inputContainer input {
    width: 100%;
    margin: 0; padding: 0; border: 0;
    display: block
}

HTML: 

<div class="inputContainer">
    <input type="text" name="company" id="company" value="" class="formInputTextField" style="width: 100%;" />
</div>
3 голосов
/ 30 марта 2011

Проблема здесь в блочной модели, когда вы говорите width: 100%, она применяет значение пикселя в зависимости от того, что доступно (что вы можете увидеть в опции «вычисленные стили» веб-инспектора).Однако затем к этой ширине добавляется отступ, так что отступ в 5px будет равняться общей ширине 100% + 10px (по 5 для каждой стороны).

Чтобы устранить эту проблему, необходимо удалитьзаполнить, или включить его в значение вашей ширины.Например:

input { width: 100%; padding: 0; }

Или

input { width: 90%; padding: 0 5%; } /* width totals 100% */

Большинство элементов формы по умолчанию наследуют некоторое количество отступов;так что даже если вы не применяете к входу специальное заполнение, оно все еще там, потому что браузер по умолчанию использует заполнение.

1 голос
/ 08 сентября 2017

Я думаю, вы должны попытаться использовать 

box-sizing: border-box
...