CSS: поле ввода и выбор опции ошибок? - PullRequest
Новая
       19

CSS: поле ввода и выбор опции ошибок?

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

Почему поля ввода всегда «превышают» div, в котором они содержатся, когда я устанавливаю их на 100%?

CSS 

.item-form {
    margin:0px 0px 10px 0px;
    clear:both;
    border:1px solid #999966;
} 

.item-form  input,  
.item-form textarea,
    {
    background-color:#ffffff;
    border: 1px solid #dddddd; 
    width:100%;
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
    padding:2px 2px 2px 2px;
}

HTML 

<div class="item-form">
    <input name="username" type="text" id="username" value="" title="USER NAME"/>
</div>

выход, enter image description here

Как я могу это исправить ??

Спасибо.

РЕДАКТИРОВАТЬ:

Кажется, я исправил проблему с полями ввода, но потом я столкнулся с другой проблемой - поле выбора , 

.item-form {
    margin:0px 0px 10px 0px;
    padding:0px 6px 0px 0px; /** important **/
    clear:both;
    }

.item-form select{
    border: 1px solid #dddddd; 
    width:100%; /** a bug to fix **/
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
    padding:2px 2px 2px 2px;
    color:#999;
    }

Теперь выбранные поля "недостаточно загружены" !!

enter image description here

Как мне это исправить ??

Спасибо.

Ответы [ 2 ]

1 голос
/ 31 марта 2011

Это дает входам ширину 100%, , затем , добавляя отступы 2px и границу 1px с каждой стороны. В результате получается ввод шириной 6 пикселей.

Для исправления необходимо ограничить ширину, доступную для входов, добавив отступ к родительскому элементу . В этом случае добавьте 6px правый отступ к .item-form: 

.item-form {
    padding-right: 6px;
} 

.item-form input,  
.item-form textarea {
    width: 100%;
    padding: 2px;
}

Селекты являются нечетными, поскольку они не следуют приведенным выше правилам (ширина 100% включает отступы) - поэтому вы не хотите ограничить ширину своих родителей. Таким образом, хитрость заключается в том, чтобы помещать элементы-обертки только с отступами вокруг входных данных и текстовых полей, но не вокруг селектов.

См. этот пример для точного выравнивания пикселей.

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

Используйте outline вместо border.border влияет на макет в том смысле, что он оставляет место для границы.outline просто поглаживает (или обводит) края, без изменения положения.Это на два пикселя больше, потому что у вас есть две однопиксельные границы с каждой стороны, которые заставляют его появляться на два пикселя больше.

...