Question

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

我有几个表单标签定义为内联块，宽度为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;
}

我如何得到＆＃34;女性＆＃34;直接坐在＆＃34;男性＆＃34;。

我已经接近但我不认为它是正确的方式。我合并了<p>中的单选按钮输入，然后将其标签和自身浮动到左侧，添加了<br />，然后清除了提交按钮，但它看起来并不那么好。

请咨询？谢谢一堆，约什

Answer 1

我建议重新组织您的HTML，以下内容：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

添加休息时间？

<input type="radio" name="gender" value"male">Male<br />
<input type="radio" name="gender" value"female">Female

Answer 3

您可以将每个无线电输入放在div（或其他块元素）中，然后它们将彼此叠加。然后，您可以使用CSS为所需的任何其他样式设置这些div的样式。

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

3 个答案: