如何水平对齐文本和选择框?

时间:2016-10-28 21:18:18

标签: html

此代码生成

<table>
    <tr>
        <td NOWRAP><?php echo "Employee Birthdays for " . $monthName; ?></td>
        <td width="100%"></td>
        <td>Browse:</td>
        <td valign="middle">
            <form method="get">
                <select type="submit" name="mo" onchange="this.form.submit()">
                    <option value="01">January</option>
                    <option value="02">February</option>
                    <option value="03">March</option>
                    <option value="04">April</option>
                    <option value="05">May</option>
                    <option value="06">June</option>
                    <option value="07">July</option>
                    <option value="08">August</option>
                    <option value="09">September</option>
                    <option value="10">October</option>
                    <option value="11">November</option>
                    <option value="12">December</option>
                </select>
            </form>
        </td>
    </tr>
</table>

这张图片:enter image description here

如何让月份选择框实际排列&#34;浏览:&#34;?

编辑:我应该注意,这适用于IE浏览器,但在Chrome中它未对齐。

2 个答案:

答案 0 :(得分:2)

你有一些影响代码的其他CSS样式,它似乎在下面工作正常。

我在Firefox和Chrome中都检查过这个版本。

&#13;
&#13;
td {
  border: 1px dotted gray;
  height: 100px; /* for demo only */
}
form {
  border: 1px dashed blue;
}
&#13;
<table>
  <tr>
    <td nowrap>Employee Birthdays for October</td>
    <td width="100%"></td>
    <td>Browse:</td>
    <td valign="middle">
      <form method="get">
        <select type="submit" name="mo" onchange="this.form.submit()">
          <option value="01">January</option>
          <option value="02">February</option>
          <option value="03">March</option>
          <option value="04">April</option>
          <option value="05">May</option>
          <option value="06">June</option>
          <option value="07">July</option>
          <option value="08">August</option>
          <option value="09">September</option>
          <option value="10">October</option>
          <option value="11">November</option>
          <option value="12">December</option>
        </select>
      </form>
    </td>
  </tr>
</table>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

在你的CSS中添加任何一个代码

form{
  margin-bottom: 0em;
}

form{
  margin-bottom: 0em !important;
}