CSS - 两列形式维护正确的Tab键顺序?

时间:2011-12-07 16:14:55

标签: css forms semantics

我目前正在构建一个表单以充当“编辑个人资料”表单。在我的设计中,我将字段分成两列。

我正在尝试在我的表单上保持标签顺序正确,所以如果标签显示,你将沿着左栏,然后是右栏。我的问题是我无法让他们按照我想要的方式排队!

密码应直接在用户名右侧,密码(再次)应直接在公司的权利等。

请参阅随附的JSFiddle以了解我的目标 - http://jsfiddle.net/Dhz6u/

有什么想法吗?

谢谢!

2 个答案:

答案 0 :(得分:3)

您必须使用字段的'tabindex'属性。

<INPUT tabindex="1" type="text" name="field1">
<INPUT tabindex="2" type="text" name="field2">
<INPUT tabindex="3" type="submit" name="submit">

http://www.w3.org/TR/html4/interact/forms.html#adef-tabindex

答案 1 :(得分:2)

尝试在右侧使用负边距div s:

margin: -72px 0 72px;

您需要正底部边距以确保div不重叠。

对于第二个字段集,你需要给它一个更大的负边距,但是如果你知道div的数量并且可以给它们设定一个高度,那就不应该太重了。

请参阅http://jsfiddle.net/chris5marsh/Dhz6u/4/