css - 垂直对齐标记为单选按钮的正确方法是什么

Question

我正在尝试让单选按钮堆叠在一起，而不是并排显示。

为了对齐输入框，我有几个定义为内联 block 的表单标签，宽度为 150。

我知道如何在没有标签的情况下执行此操作，但是当标签位于左侧时，我无法弄清楚。

HTML:

<form action="here.php" method="POST">
        <p>
            <label for="bday">Birthday:</label>
            <input type="date" name="bday">
        </p>
        <p>
            <label for="gender">Gender</label>
            <input type="radio" name="gender" value"male">Male 
            <input type="radio" name="gender" value"female">Female
        </p>
        <p>
            <input type="submit" name="input" value="Submit">
        </p>
    </form>

CSS:

form {
width:356px;
margin: 0 auto;
}

label {
width:150px;
display: inline-block;
}

如何让“女性”直接坐在“男性”的下方。

我已经接近了，但我认为这不是正确的方法。我将单选按钮输入组合在 <p> 中然后将其标签和自身向左浮动，添加一个 <br /> ，然后清除了提交按钮，但看起来不太好。

请指教？非常感谢，乔希

Answer 1

我建议重新组织您的 HTML，如下所示:

form {
  width: 356px;
  margin: 0 auto;
}
fieldset {
  margin: 0.5em auto;
  width: 90%;;
}
label {
  width: 150px;
  display: inline-block;
}
fieldset fieldset label {
  width: auto;
  margin-left: 150px;
}

<form action="here.php" method="POST">
  <fieldset>
    <label for="bday">Birthday:</label>
    <input type="date" name="bday">
    <!-- a fieldset groups related input elements together -->
    <fieldset>
      <!-- a <legend> labels a section of the <form>, identifying
           the grouped <inputs>, a <label> was utterly wrong for
           this, given it was, and can be, associated with only
           one of the <input>s -->
      <legend>Gender</legend>

      <!-- wrapping the <input> associates the <input> with the appropriate
           (parent) label -->
      <label>
        <input type="radio" name="gender" value="male">Male</label>
        <!-- inciedentally, the '=' is not optional, and you were
             missing them here to identify the value and its
             associated attribute-value -->
      <label>
        <input type="radio" name="gender" value="female">Female</label>
    </fieldset>
    <input type="submit" name="input" value="Submit">
  </fieldset>
</form>