0

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

这最终会显示比文本项更高的复选框，如下所示：

截图 1

我想要的是它们像这样排列在一起：

截图 2

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

无论如何指出HTML中的任何缺点，但正如我所说，这真的不在我的控制之下，我只能使用CSS来影响布局。

4

3 回答 3

2

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

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

JSFiddle 示例

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

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

JSFiddle 示例

于 2012-08-02T16:27:58.947 回答
1

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

于 2012-08-02T16:11:02.860 回答
1

尝试

input {
 display: inline-block;
}

fieldset {
 display: inline;
 padding: 0;
 margin: 0
}
于 2012-08-02T16:20:41.390 回答