2010-11-13 31 views
1

如標題所述,選擇並提交元素有20px右邊距。其他元素不?選擇,提交元素有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> 
+0

您是否有問題嗎? – 2010-11-13 19:34:06

+0

我認爲這將是不言而喻的問題是爲什麼這些元素有20px的右邊距? – vanamonde 2010-11-13 20:12:06

+0

你能上傳一個例子嗎?在哪個瀏覽器中?我們需要全面的CSS。 – chchrist 2010-11-13 20:20:20

回答

2

這是因爲表單元素有關於寬度,填充和邊框寬度如何影響他們的最終寬度在屏幕上顯示的稍有不同的規則。 「正確」的方式來解決這個問題。將重置這些表單元素的所有其他元素使用的一個使用的盒模型,與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獲取更多信息