Question

我被要求在固定位置（行，列）中绘制html元素（文本，复选框，文本字段）。这里的例子是如何定位元素。

row | column | element<br>
1   | 1      | Title1<br>
1   | 14     | Text field (size = 20)<br>
1   | 40     | Tile2<br>
1   | 50     | Text field (size = 10)<br>
2   |...<br>

我尝试使用表格的解决方案如下

<table>
  <tr><td colspan="13">Title1</td><td colspan="26">Text field

......但由于细胞之间空间狭窄，这似乎是一个糟糕的解决方案。空白空间由其他行中的单元格生成（例如包含图像）带有一个td和<pre>标记的第二个解决方案（将文本字段边框设置为0会导致字段不是100％垂直对齐

如何显示此类数据？

我正在做的一个例子是：

01|01|User                 :
01|25|Text field size = 10
03|01|Name 1               :
03|25|Text field size = 30
04|01|Name 2               :
04|25|Text field size = 30
04|25|Text field size = 30
05|01|Aubreviation         :
05|25|Text field size = 05
06|01|User group           :
06|25|Text field size = 10
06|37|Text field size = 44
07|01|Telephone            :
07|25|Text field size = 20
08|01|E-mail               :
08|25|Text field size = 50
09|01|Company allocation   :
09|25|Text field size = 9
10|01|Name of printer      :
10|25|Text field size = 10
10|37|Message
11|01|Language code        :
11|25|Text field size = 2
13|01|Message delete cycle :
13|25|Text field size = 9
13|28|Days
15|01|SBM mess.delete cyc. :
15|25|Text field size = 9
15|28|Days

输出应如下所示：http://i.stack.imgur.com/MQ1f9.gif 字段应在HTML输出中完美对齐，如下图所示。

Answer 1

您可能最好使用CSS absolute positioning代替表来布局页面。

Answer 2

这里似乎存在误解，如在示例中，“列”一词显然与行上的字符位置有关。据推测，渲染应该对所有字符使用相等的宽度，即使用等宽字体。这种意义上的列与表列（这是colspan所涉及的）非常不同。

HTML中的常规方法只使用

<tr> <td><label for="a1">Title1</label></td> <td><input name="a1" id="a1"  size="20"></td>
     <td><label for="a2">Title1</label></td> <td><input name="a2" id="a2"  size="10"></td> </tr>

如果需要，列的宽度（在HTML意义上）将在CSS中设置，或者可以使用标签中的宽度属性。但是，没有办法用字符指定宽度（在CSS3草案中有一个建议的单位，但它尚未实现）。我建议你要求澄清一下：布局是否真的反映了打字机风格的格式，这种格式暗示了等宽字符，或者每列只占据其自然宽度（根据需要的宽度）是可以的。

Answer 3

带有标签的解决方案不能在此上下文中使用，因为：在必须遵守的标签之间存在几个空白空间。这里的例子是对话框的两个第一个条目。

01|01|Part
01|14|:
02|01|Change       :

在第1行中，'：'应该在位置：如果它正确显示，它应该与变化结束时的'：'完全对齐，但事实并非如此。我甚至用<pre>尝试了解决方案并用空格填充空格（''），这里我遇到了另一个问题。如果文本字段（size = 1）与标签垂直对齐，则由于文本字段的边界，文本字段旁边的标签以某种方式不与标签的第二个字符对齐。我甚至将边框设置为0但它仍然保持薄边框。尝试垂直对齐带有标签的复选框时也存在问题（参见附图） http://i.stack.imgur.com/VwfMa.gif

在固定的行/列位置绘制html元素

3 个答案: