Question

我在设置表格时遇到了麻烦。

<tr>
    <td class="label">HRS</td>
    <td class="label">INSP</td>
</tr>

我希望此行中的“HRS”和“INSP”字段与它们上方的输入字段对齐。我尝试了很多东西，但没有一个有效。我确信这是一个简单的解决方案，我只是错过了它。

Answer 1

要使输入与标签对齐，您需要

A）在第二行添加一个空白<td></td>（因为它上面的行有3个单元格而且只有2个），并且

B）从float:right;课程中删除.label。

请参阅this作为示例。我只将<td></td>添加到您的四个部分中的第一部分的行中，但它们都是相同的，所以您明白了。

Answer 2

你想要像这样设置你的表：

            <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>的数量相同，或使用colspan来弥补缺失的数量。

Answer 3

选中 fiddle 。

该行上方的行只包含两个内容为'hrs'且'insp'的<td>，包含3个<td> s。因此，您需要在该行中添加一个空白td（即'hrs'和'insp'）。

此外，您需要删除样式float:right并在position:relative - 类的样式定义中添加样式.smallinput。

的 O / P

这解决了您的问题..

Answer 4

我把它从这些<td class="label"></td>中取出并放在前面，它工作正常。

INSP<input type="text" class="smallinput"></td><td width="40px" style="font-size:12px">HRS<input type="text" class="smallinput">

（使用chrome。）

Answer 5

你的代码都错了。首先，您有未闭合的元素，所有输入元素都应以/＆gt;

结尾

然后，为了让一切都排成一行，这样做：

<tr>
<td>label</td>
<td>input</td>
<td>label</td>
<td>input</td>
</tr>

根据需要设置样式

Answer 6

这对我有用

<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>

html表元素与上面的行不对齐

6 个答案:

这解决了您的问题..