代码之家 › 专栏 › 技术社区 › Neil Barnwell

在html:table或no table中布局数据输入表单?

html

Neil Barnwell · 技术社区 · 14 年前

我想创建如下数据输入表单:

Name:    [ Name textbox ]
Age:     [ Age textbox  ]
label n: [ textbox n    ]

标签左对齐,文本框左对齐。我知道我可以在 table 元素,但我也知道“表应该只用于表数据”。虽然我部分同意/不同意这一说法,但我想知道我所需的布局是否可以/应该被视为“表格数据”,以及如果没有几十行复杂的跨浏览器CSS,另一种布局将如何产生相同的结果。

我现在不太做Web开发(在我做UI工作的时候,严格地说WinForms已经有一段时间了),所以我很感激有一个优雅的解决方案。可能涉及到一个无序的列表,项目符号点关闭,标签有点偏离——也许是Y字段位置偏移?

2 回复 | 直到 14 年前

Yi Jiang G-Man 14 年前

label

<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>

#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 ,其中包含一些您可以尝试的更有趣的内容。