在HTML中布局输出数据输入表格：表格还是没有表格？

概述我想创建一个如下所示的数据输入表单： Name: [ Name textbox ]Age: [ Age textbox ]label n: [ textbox n ] 标签左对齐的位置,文本框左对齐.我知道我可以在表元素中执行此 *** 作,但我也知道“表格应仅用于表格数据”.虽然我同意/不同意这种说法 – 我想知道我所希望的布局是否可以/应该被视为“表格数据”,以及如果没有几十 我想创建一个如下所示的数据输入表单：

name:    [ name textBox ]Age:     [ Age textBox  ]label n: [ textBox n    ]

标签左对齐的位置,文本框左对齐.我知道我可以在表元素中执行此 *** 作,但我也知道“表格应仅用于表格数据”.虽然我同意/不同意这种说法 – 我想知道我所希望的布局是否可以/应该被视为“表格数据”,以及如果没有几十行复杂的交叉产生相同的结果,那么另一种布局是什么？浏览器CSS.

我现在不做很多web开发(现在我在做UI工作时已经有一段时间了WinForms),所以我很欣赏可能有一个优雅的解决方案.可能涉及一个无序列表,其子d点被关闭,有点偏离标签 – >字段y位置偏移,也许？

解决方法 带有标签元素的无序列表应该是这里的方法.我将使用的标记应该类似于：

<form ID="person" method="post" action="process.PHP">    <ul>        <li><label for="name">name: </label><input ID="name" name="name" type="text" /></li>        <li><label for="age">Age: </label><input ID="age" name="age" type="text" /></li>        <li><label for="n">N: </label><input ID="n" name="n" type="text" /></li>    </ul></form>

而这个CSS如果得到类似的东西要求你要求：

#person ul {    List-style: none;}#person li {    padding: 5px 10px;}#person li label {    float: left;    wIDth: 50px;    margin-top: 3px;}#person li input[type="text"] {    border: 1px solID #999;    padding: 3px;    wIDth: 180px;}

请参阅：http://jsfiddle.net/tZhUQ/1,其中包含一些您可以尝试的有趣内容.

总结

以上是内存溢出为你收集整理的在HTML中布局输出数据输入表格：表格还是没有表格？全部内容，希望文章能够帮你解决在HTML中布局输出数据输入表格：表格还是没有表格？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。