我在设计表格时遇到了麻烦。
<tr>
<td class="label">HRS</td>
<td class="label">INSP</td>
</tr>
我希望这一行中的“HRS”和“INSP”字段与它们上方的输入字段对齐。我已经尝试了很多东西,它们都没有奏效。我确信有一个简单的解决方案,我只是想念它。
我在设计表格时遇到了麻烦。
<tr>
<td class="label">HRS</td>
<td class="label">INSP</td>
</tr>
我希望这一行中的“HRS”和“INSP”字段与它们上方的输入字段对齐。我已经尝试了很多东西,它们都没有奏效。我确信有一个简单的解决方案,我只是想念它。
要使输入与标签对齐,您需要
A)在第二行添加一个空白<td></td>
(因为它上面的行有 3 个单元格并且它只有 2 个),并且
B)float:right;
从.label
班级中删除。
以此为例。我只在<td></td>
你的四个部分中的第一个添加了行,但它们都是相同的,所以你明白了。
你会想像这样设置你的表:
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>HRS</td>
<td>
<input type="text" class="smallinput">
</td>
</tr>
<tr>
<td>INSP</td>
<td>
<input type="text" class="smallinput">
</td>
</tr>
<tr>
<td colspan="2">
<textarea name="textarea" rows="12" class="txt"></textarea>
</td>
</tr>
</table>
下次在发布之前格式化您的代码。你没有明确表达你的意图。所以我们有很多人给你不同的答案,因为我们正在格式化你的代码并试图弄清楚你真正想要做什么。确保<td>
每行中的 s 数量也相同,或者使用 colspan 来弥补缺失的 s。
检查这个小提琴。
该行上方的行仅包含两个<td>
内容为'hrs'和'insp' 的行,包含 3 个<td>
。因此,您也需要在该行中放置一个空白 td (即使用'hrs'和'insp')。
此外,您需要删除样式并在-class的样式定义中float:right
添加样式。position:relative
.smallinput
我把它从这些东西里拿出来<td class="label"></td>
放在前面,效果很好。
INSP<input type="text" class="smallinput"></td><td width="40px" style="font-size:12px">HRS<input type="text" class="smallinput">
(使用铬。)
你的代码全错了。首先,你有未闭合的元素,所有输入元素都应该以 /> 结尾
然后,要将所有内容排成一行,请执行以下操作:
<tr>
<td>label</td>
<td>input</td>
<td>label</td>
<td>input</td>
</tr>
根据需要的 then 样式
这对我有用
<tr>
<td class="fieldtitle"><i style="color:#fff;" class="icon"></i>
</td>
<td width="40px" style="font-size:12px">
<input type="text" class="smallinput"><span style="font-size:10px">HRS</span>
</td>
<td width="40px" style="font-size:12px">
<input type="text" class="smallinput"><span style="font-size:10px">INSP</span>
</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>