0

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

http://jsfiddle.net/Gs7Vx/5/

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

我希望这一行中的“HRS”和“INSP”字段与它们上方的输入字段对齐。我已经尝试了很多东西,它们都没有奏效。我确信有一个简单的解决方案,我只是想念它。

4

6 回答 6

1

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

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

B)float:right;.label班级中删除。

以此为例。我只在<td></td>你的四个部分中的第一个添加了行,但它们都是相同的,所以你明白了。

于 2013-10-21T04:06:28.237 回答
1

你会想像这样设置你的表:

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

于 2013-10-21T04:15:22.200 回答
1

检查这个小提琴

该行上方的行仅包含两个<td>内容为'hrs''insp' 的行,包含 3 个<td>。因此,您也需要在该行中放置一个空白 td (即使用'hrs''insp')。

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

  • 输出/输出

在此处输入图像描述

这解决了你的问题..

于 2013-10-21T06:17:15.823 回答
0

我把它从这些东西里拿出来<td class="label"></td>放在前面,效果很好。

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

(使用铬。)

于 2013-10-21T04:05:06.257 回答
0

你的代码全错了。首先,你有未闭合的元素,所有输入元素都应该以 /> 结尾

然后,要将所有内容排成一行,请执行以下操作:

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

根据需要的 then 样式

于 2013-10-21T04:09:29.663 回答
0

这对我有用

<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>
于 2013-10-21T04:13:46.463 回答