以不同的方式在表单中构建HTML输入和标签 [英] Differents way to structure html inputs and labels in a form

问题描述

我曾用 float来做到这一点。

I'm wondering what are the best solutions to structure a html form with labels and inputs.

我想知道什么是用标签和输入结构html表单的最佳解决方案。 ：将留给标签， float：right 作为输入。并且每一行都包含一个块 clear：both 。

I used to do this with float: left to the label and float: right for the inputs. And each line is surround with a block clear: both.

但我不认为这些CSS属性是这样做的东西..

But i don't think these CSS property were made for something like that..

那么其他解决方案是什么？表？

So what are the others solutions ? Tables ?

推荐答案

嗯，这实际上取决于你希望表单的样子。例如，如果你想要一个带有边框的清晰网格，我建议使用一个表格。

Well it really depends on what you want the form to look like. For example, if you want a clear grid with borders I recommend using a table.

要复制你拥有的内容，你可以这样做：

To duplicate what you have, you can do this:

<label for='textbox'>Label</label><input type='text' id='textbox' />

然后这个css：

And then this css:

label { display: inline-block; width: 100px; }

这会使标签与输入元素保持同一行，但会将其推向适当的位置距离。

This will make the label stay on the same line as in input element but will push it the appropriate distance.

就我个人而言，我尽量避免使用浮动来对齐元素。我宁愿使用绝对位置，并设置左或右，顶部或底部。对我来说，漂浮就像是要求浏览器为你做，也许一些浏览器（咳嗽即咳嗽）将决定有点不同。

Personally, I try to avoid using floats to align elements. I would rather use position absolute and set left or right and top or bottom. To me floating is like asking the browser to do it for you, and maybe some browsers (cough ie cough) will decide to draw it a little differently.

这篇关于以不同的方式在表单中构建HTML输入和标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！