Question

如标题中所述，选择和提交元素有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>

Answer 1

这是因为表单元素的宽度，填充和边框宽度如何影响屏幕上显示的最终宽度的规则略有不同。解决此问题的“正确”方法是将这些表单元素使用的框模型重置为每个其他元素使用的框模型，并使用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 post

选择，提交元素有20px右边距

1 个答案: