Question

我有一些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>

最终显示的复选框高于文本项目，如下所示：

Screenshot 1

我想要的是他们像这样对齐：

Screenshot 2

这看起来很简单，但我无法弄清楚如何实现它。如果你删除文本输入或字段集，那么剩下的元素占用最小的垂直空间，只有当它们在一起时，文本输入才会被推到页面上。

一定要指出HTML中的任何缺点，但正如我所说，这实际上不在我的控制之下，我只能使用CSS来影响布局。

Answer 1

我能想到两种快速解决方案。第一种方法是通过设置：

让表格更像常规文本

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

JSFiddle example

或者通过对齐文本框来表现得更像表：

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

JSFiddle example

Answer 2

尝试给浮动：左边两个，输入和字段集，然后根据需要使用margin-top来达到你想要的效果。

Answer 3

试

input {
 display: inline-block;
}

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

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

3 个答案: