выберите, отправить элементы имеют 20px правое поле - PullRequest
1 голос
/ 13 ноября 2010

, как указано в заголовке, элементы select и submit имеют правое поле 20px. Другое для элементов не так ли?

DL>* {
    margin: 10px 0px;
    background: #aaa;
}

DL>*>* {
    display: inline-block;
    border: 5px solid #666;
    padding: 5px;
    margin: 5px;
    width: 250px;
}

<dl>
    <dt><label for="name">Ваше имя</label></dd>
    <dd><input id="name" name="name" type="text"></dd>
    <dt><label for="name">Ваши контактные</label></dd>
    <dd><input id="name" name="name" type="text"></dd>
    <dt><label for="name">Vali</label></dd>
    <dd><select><option>1</option><option>2</option></select></dd>
    <dt><label for="question" name="name">вопрос</label></dt>
    <dd><textarea id="question"></textarea></dd>
    <dd><input type="submit" value="спросить"></dd>
</dl>

1 Ответ

2 голосов
/ 14 ноября 2010

Это потому, что у элемента формы есть немного другие правила относительно того, как width, padding и border-width влияют на их окончательную ширину, как показано на экране. «Правильный» способ исправить это - сбросить блочную модель, используемую этими элементами формы, на модель, используемую каждым другим элементом, со свойством box-sizing:

dl > * > * {
    -ms-box-sizing: content-box;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

См. Это демо: http://jsfiddle.net/9dGkk/1/ и это Сообщение Quirksmode для получения дополнительной информации

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...