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

＆＃13;

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

＆＃13;

<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>

＆＃13;

对齐字段集

2 个答案: