使用CSS在具有不同跨度的表格单元格中对齐文本输入控件

Question

我有一个非常基本的问题。

我正在使用HTML和CSS设计一个表格，它应该调整到当前的页面宽度（e.i.我必须使用所有尺寸的相对单位）。该表单由几个文本字段组成，所有文本字段都具有不同的宽度，并且我的客户希望它们以某种方式排列（例如，ZIP，City和Country是一行中具有不同大小比例的三个不同字段等）。

为了正确布局输入字段及其标题，我使用具有不同列跨度的单元格将它们放入表中。我将TD中的控件与float:left对齐，并使用相对宽度（如width:90%）使控件占据整个单元格。

我面临的问题是我的控件是左边对齐的，而且在不同列跨度的单元格中右边距看起来是锯齿状的，即所有文本输入字段的宽度都略有不同，因为单元格的宽度和大小不同与单元格宽度成正比，可能因colspan不同而有所不同（见图）。

如何让我的控件在两侧都看起来对齐？

P.S。：我是一名Web开发人员，对HTML和CSS有一定的了解，但我根本不是设计师。因此，对于设计师来说，这个问题可能是完全基本的，但我没有找到合理的关键字组合的合理答案。如果这是一个共同的话题（我想），请给我一些线索，如何在寻找答案的方式中提出我的问题。

Answer 1

我不知道你的代码，但看起来你可能正在使用不同的字体大小调整输入字段，我认为可以创建你得到的效果。 你可以粘贴你在图片中显示的三个元素的CSS和HTML吗？