CSS - 簡單的表單沒有正確格式化

Question

我已經得到了下面的表單，其中一切都格式正確，除了表單底部的提交按鈕：它們應該居中。

我試過各種不同的嵌套divs組合設置寬度，邊距和文本對齊，但我似乎無法弄清楚我做錯了什麼。

http://jsfiddle.net/vM5fp/

這裏是我迄今爲止...

HTML

<form id="myForm" action="#" method="post"> 
    <div> 
     <label for="pickone" id="ruleTypeLabel">Pick One: </label> 
     <select id="pickone" name="pickone"> 
      <option value="1">1</option> 
      <option value="2" selected="selected">2</option> 
     </select> 
    </div> 
    <div> 
     <label for="field1" id="field1label">Field 1: <span class="helpercomment">xx123</span></label> 
     <input type="text" id="field1" name="field1" /> 
    </div> 
    <div> 
     <label for="field2" id="field2label">field 2: </label> 
     <input type="text" id="field2" name="field2" /> 
    </div> 
    <div> 
     <label for="field3" id="field2">field 3: <span class="helpercomment">Separate by commas</span></label> 
     <textarea id="field 3" name="field 3"></textarea> 
    </div> 
    <div> 
     <label for="field4" id="field4label">field 4: </label> 
     <input type="text" id="field4" name="field4" /> 
    </div> 
    <div> 
     <label for="startDate" id="startDateLabel">Start Date: <span class="helpercomment">MM/DD/YYYY</span></label> 
     <input type="text" id="startDate" name="startDate" class="date"/> 
     <a href="#" class="calendaricon"> 
      <img src="Calendar.png" /> 
     </a> 
    </div> 
    <div>  
     <label for="endDate" id="endDateLabel">End Date: <span class="helpercomment">MM/DD/YYYY</span></label> 
     <input type="text" id="endDate" name="endDate" class="date"/> 
     <a href="#" class="calendaricon"> 
      <img src="Calendar.png" /> 
     </a> 
    </div> 

    <div> 
     <div class="buttonrow"> 
      <input type="submit" id="submitButton" value="Submit" /> 
      <input type="submit" id="cancelButton" value="Cancel" /> 
     </div> 
    </div> 

</form> 

而CSS：

form { 
    width:300px; 
    margin:10px auto; 
} 

form div { 
    clear:both; 
    width:100%; 
} 

form div label { 
    display:block;  
    text-align:right; 
    width:140px; 
    float:left; 
} 

form div label .helpercomment{ 
    display:block; 
    font-size:.8em; 
    font-style:italic; 
    color:#C1C2D7; 
    background-color:#FFF; 
    text-align:right; 
} 

form div input, form select, form textarea { 
    float:left; 
    width:140px; 
    margin:2px 0 20px 10px; 

} 

form div input.date { 
    width:113px; 
} 

form div a.calendaricon { 

} 

form div a.calendaricon img { 
    display:inline; 
    border:none; 
    margin-top:2px; 
    margin-left:4px; 
} 

form div div.buttonrow { 
    text-align:center; 
    width:auto; 
    margin:auto; 
} 

.buttonrow #submitButton, .buttonrow #cancelButton { 

    width:auto; 

} 

Answer 1

按鈕是浮動的（因爲它們也是input）。無論是將其更改爲<button>或修改CSS：

.buttonrow #submitButton, .buttonrow #cancelButton { 

    float: none; 
    width:auto; 

} 

http://jsfiddle.net/UcPD2/

Answer 2

你好得多使用風格無序列表比DIV格式化表單。

form ul, form li { 
    margin:0; 
    padding:0 
} 


<ul> 
    <li><label>....</label> <input ... /></li> 
    ... 
</ul>