使用 CSS 调整具有不同跨度的表格单元格中的文本输入控件
我有一个非常基本的问题。
我正在使用 HTML 和 CSS 设计一个表单，它应该调整到当前页面宽度（ei 我必须使用所有尺寸的相对单位）。该表单由多个具有不同宽度的文本字段组成，我的客户希望它们以某种方式排列（例如，邮政编码、城市和国家/地区为一行中的三个不同字段，具有不同的大小比例等）。
为了正确布局输入字段及其标题，我使用具有不同列跨度的单元格将它们放入表格中。我将 TD 中的控件与 float:left 对齐，并使用相对宽度（例如 width:90%）使控件占据整个单元格。
我面临的问题是我的控件向左对齐，并且在具有不同列跨度的单元格中，右边距看起来呈锯齿状，即所有文本输入字段的宽度略有不同，因为单元格具有不同的宽度，并且大小与单元格宽度可能会因 colspan 的不同而有所不同（参见图片）。
如何使控件看起来两侧对齐？
PS：我是一名 Web 开发人员，具有一些 HTML 和 CSS 知识，但我根本不是设计师。因此，这个问题对于设计师来说可能是完全基本的，但我未能通过合理的关键字组合找到合理的答案。如果这是一种常见主题（我认为），请为我提供一些线索，如何以寻找答案的方式提出我的问题。
I have a pretty basic question.
I am designing a form using HTML and CSS which should resize to the current page width (e.i. I have to use the relative units for all sizes). The form consists of several text fields all having different width and my client wants that they are arranged in a certain manner (like, for example, ZIP, City and Country to be three different fields in one row with different size proportions etc.).
To correctly layout the input fields along with their captions I put them into a table, using cells with different column span. I align the controls within TD with float:left and use relative width (like width:90%) to make the controls occupy the entire cell.
The problem I am facing is that my controls are aligned to the left and in the cells with different column spans the right margin looks jagged, i.e. all text input fields have slightly different width, because the cell have different widths and the size is proportional to cell width which may vary due to different colspan (see the picture).
How can I make my controls to look aligned on both sides?
P.S.: I am a web developer with some knowledge of HTML and CSS, but I am not at all a designer. Thus, this question might be utterly basic for a designer, but I failed to find a plausible answer with reasonable keyword combinations. If it is a sort of common topic (that I suppose) please just provide me with some clues how to formulate my question in the way to find answers.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
如果没有您的代码，我无法判断，但看起来您可能在输入字段中使用不同的字体大小，我认为这可以产生您所获得的效果。
你能粘贴图片中显示的三个元素的 css 和 html 吗？
i cant tell without your code but it looks like you may be using different font sizing for the input fields which i think could create the effect you are getting.
can you paste the css and html for the three elements you have shown in the pic?