Question

给出这样的html表单：

<form action='/example/' id='example_form' method='POST' name='example_form'>
  <fieldset>
    <legend>Example form</legend>
    <label for='age'>
      Age
      <input id='age' name='age' tabindex='1' type='text' />
    </label>
    <label for='gender'>
      Gender
      <select id='gender' name='gender' tabindex='2'>
        <option disabled='disabled' id='gender' name='gender' value=''>Choose one:</option>
        <option id='gender_female' name='gender' value='female'>Female</option>
        <option id='gender_male' name='gender' value='male'>Male</option>
      </select>
    </label>
    <label for='height'>
      Height
      <input id='height' name='height' size='3' tabindex='3' type='text' />
    </label>
    <label for='weight'>
      Weight
      <input id='weight' name='weight' size='4' tabindex='4' type='text' />
    </label>
    <input id='Save' tabindex='5' type='submit' value='Save' />
  </fieldset>
</form>

如何设置样式以使标签的经典表格布局在左侧，字段向右，所有内容都垂直对齐？表显然是不可能的。我找不到任何关于如何使用隐式标签和CSS的方法。

如果答案是不包装字段那么就是这样，但我更愿意为此找到解决方案：

这是生成的html。
我一直在阅读使用隐式标签如何改善可访问性。

非常感谢任何帮助/指点/见解。

Answer 1

以下是一些入门的基本款式

<强> example jsfiddle

fieldset {width:300px;}
label {display:block;overflow:hidden;line-height:30px;}
label input, label select {float:right;}
input[type=submit] {float:right;width:100px;border:solid 1px;}

Answer 2

或者，根据“垂直对齐”的含义，你可以试试这个。

label {
    display: block;
    position:relative;
    margin: 0 0 5px 0;
}
label > input,
label > select {
    position: absolute;
    left: 70px;
    width: 100px;
}

jsfiddle here

或替代here

Answer 3

CSS永远不会让我感到惊讶。根据@magicalex的答案，我想出了以下内容：

label {
    display: block;
    position:relative;
    text-align: right;
    width: 100px;
    margin: 0 0 5px 0;
}
label > input,
label > select,
input {
    position: absolute;
    left: 120px;
}

这设法完成了我的大部分想法，即水平布局，所有标签都向右对齐，所有字段都向左对齐，即使它们的宽度不同（这是不可避免的，例如iOS日期选择器等。）

然而，JSFiddle说明了如果标签被分成多行（例如由于翻译）而对齐字段的剩余问题。但我想这也可以解决。

样式化输入字段具有隐式标签的表单（包装在标签中）

3 个答案: