在字段集中对齐输入字段

Question

我在一个字段集中有一个选择输入字段和一个提交按钮。所有编程逻辑都已完成以使其能够按需工作。但是我目前正面临着一项艰巨的任务，即对齐输入字段以使其看起来时尚舒适。我是CSS的新手，欢迎任何帮助/建议使屏幕在视觉上令人信服的建议。

 <fieldset> <table width="100%" border="0" cellpadding="0" cellspacing="0" vspace="0" hspace="0"> <tr> <td align="left">Student ID: #: <select name="ID" size="1"> <option>Select ID</option> <option>SE45</option> <option>SE46</option> <option>SE47</option> </select> </td> <td align="left">Subject: <select name="subject" size="1"> <option>Select Subject</option> <option>Science</option> <option>Maths</option> </select> </td> </tr> <tr> <td align="left">Class: <select name="class" size="1"> <option>SEC2A</option> <option>SEC2B</option> <option>SEC2C</option> </select> </td> </tr> <tr> <input type="button" value="submit" /> </tr> </table> </fieldset> 

在对输入字段的对齐方式主题进行了更广泛的搜索之后，我只看到了很少的搜索结果，而它们都不是完全有用的。

因此，我想使本文对stackoverflow读者有用，您可以分享与输入字段对齐有关的任何建议

jsFiddle： http : //jsfiddle.net/jaggs/wdzgm1x0/

Answer 1

<fieldset>
<table width="100%" border="0" cellpadding="0" cellspacing="0" vspace="0" hspace="0">
<tr>
  <td align="left">Student ID: #:</td>
  <td><select name="ID" size="1">
  <option>Select ID</option>
  <option>SE45</option>
  <option>SE46</option>
  <option>SE47</option>
</select>
</td></tr>

<tr><td align="left">Subject:</td><td>
<select name="subject" size="1">
  <option>Select Subject</option>
  <option>Science</option>
  <option>Maths</option>
</select>
</td>
</tr>
<tr>
<td align="left">Class:</td><td>
<select name="class" size="1">
  <option>SEC2A</option>
  <option>SEC2B</option>
  <option>SEC2C</option>
</select>
</td>
</tr>
 <tr><td colspan=2>
   <input type="button" value="submit" />
 </td></tr>
 </table>
 </fieldset>

Answer 2

 fieldset { background-color: #ccc; padding: 10px; } td { padding: 5px; } #submit-btn { color: white; } select{ width: 100px; } label{ display: block; width: 100px; } 

 <fieldset> <table width="100%" border="0" cellpadding="0" cellspacing="0" vspace="0" hspace="0"> <tr> <td align="left"> <div class="form-group"> <label for="ID">Student ID: #:</label> <select class="form-control" name="ID" size="1"> <option>Select ID</option> <option>SE45</option> <option>SE46</option> <option>SE47</option> </select> </div> </td> <tr> <td align="left"> <div class="form-group"> <label for="subject">Subject:</label> <select class="form-control" name="subject" size="1"> <option>Select Subject</option> <option>Science</option> <option>Maths</option> </select> </div> </td> </tr> </tr> <tr> <td align="left"> <div class="form-group"> <label for="class">Class:</label> <select class="form-control" name="class" size="1"> <option>SEC2A</option> <option>SEC2B</option> <option>SEC2C</option> </select> </div> </td> </tr> <tr> <td> <input class="btn btn-primary" type="button" value="Submit" /> </td> </tr> </table> </fieldset>