CSS - 两列表单保持正确的标签顺序？答案

【问题标题】：CSS - Two column form maintaining correct tab order?CSS - 两列表单保持正确的标签顺序？
【发布时间】：2012-01-15 03:44:49
【问题描述】：

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

我正在尝试在我的表单上保持正确的跳格顺序，所以如果跳格通过，您将先从左列向下，然后再从右列向下。我的问题是我无法让他们按照我想要的方式排列！

密码应该直接在用户名的右边，密码（再次）应该直接在公司等的右边。

请查看随附的 JSFiddle 以了解我的最新情况 - http://jsfiddle.net/Dhz6u/

有什么想法吗？

谢谢！

【问题讨论】：

【解决方案1】：

尝试在右侧使用负边距divs：

margin: -72px 0 72px;

您需要正下边距以确保divs 不重叠。

对于第二个字段集，您需要给它一个更大的负边距，但是如果您知道 div 的数量并且可以给它们一个设定的高度，那么它应该没有太大关系。

【讨论】：

【解决方案2】：

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

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

【讨论】：