gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-03 21:59:08 24 4
gpt4 key购买 nike

我有一些 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 来影响布局。

最佳答案

我可以想到两个快速解决方案。第一种是通过设置使表格的行为和对齐方式更像常规文本:

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

JSFiddle example

或者通过对齐文本框使其表现得更像表格:

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

JSFiddle example

关于html - 控制表格单元格中文本输入和复选框的布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11781445/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com