控制表格单元格中文本输入和复选框的布局答案

【问题标题】：Control layout of text input and checkboxes within a table cell控制表格单元格中文本输入和复选框的布局
【发布时间】：2012-08-03 00:27:58
【问题描述】：

我有一些 HTML 并排显示一个文本输入和 2 个复选框。 HTML 是由工具生成的，因此我无法更改 HTML 的构建方式，我只能使用 CSS 对其应用样式。我的简化 HTML 和 CSS 是：

<html>
 <head>
  <style type="text/css">
  td {
    padding: 0;
    }
  fieldset {
    display: inline;
    padding: 0;
    margin: 0
    }
  input[type="text"] {
    margin: 0;
    padding: 0;
    }
  table.checkboxs  {
    border-collapse:collapse;
    }
  table.checkboxs td {
    border: none;
    margin: 0;
    padding: 0;
  }
 </style>
 </head>
 <body>
     <input type="text" id="item1" value="" />
     <fieldset>
      <table summary="" class="checkboxs" border-collapse="">
       <tr>
        <td><input type="checkbox" id="chkbox_0" name="chkbox" value="1"   /><label for="chkbox_0">One</label></td>
        <td><input type="checkbox" id="chkbox_1" name="chkbox" value="2"   /><label for="chkbox_1">Two</label></td>
       </tr>
      </table>
     </fieldset>
 </body>
</html>

最后会出现比文本项更高的复选框，如下所示：

我希望它们像这样排列在一起：

这似乎很简单，但我不知道如何实现它。如果您删除文本输入或字段集，则剩余元素占用最小垂直空间，只有当它们在一起时，文本输入才会被推下页面。

请务必指出HTML中的任何不足之处，但正如我所说，这真的不在我的控制范围内，我只能使用CSS来影响布局。

【问题讨论】：

在所有文本框或字段集上使用 position: relative 和 top: [some number, can be negative]px

标签： html css checkbox alignment

【解决方案1】：

我能想到两个快速的解决方案。首先是通过设置让表格的行为和对齐方式更像常规文本：

table.checkboxs {
    display:inline-block;
    vertical-align:middle;
}

JSFiddle example

或者通过对齐文本框使其更像表格：

input[type="text"] {
    vertical-align:top;
}

JSFiddle example

【讨论】：

@Chris：谢谢，成功了！（我只需要在我的 HTML 演示文件中添加一个 !DOCTYPE 以使其在 IE8 中工作）

【解决方案2】：

尝试将 float:left 赋予它们，输入和字段集，然后在需要时使用 margin-top 来实现你想要的。

【讨论】：

【解决方案3】：

试试

input {
 display: inline-block;
}

fieldset {
 display: inline;
 padding: 0;
 margin: 0
}

【讨论】：