如何将单选按钮与标签排成一行？

Question

我有HTML表单，其中包含标签和输入（单选按钮）。我使用clear:both;和float:left;来对齐左边的标签并在其前面的同一行输入，但它也起作用，但这也会影响单选按钮。我有两个标签，然后是单选按钮，然后是一个标签，然后是单选按钮。如何在一行中对齐所有这些（2个标签+单选按钮+标签+单选按钮）？

我尝试使用float:none和display:inline;，但它没有用。标签和单选按钮显示在标签的底部。

＆＃13;

＆＃13;

form label {
    width: 225px;
    font-weight: bold;
    float: left;
    clear: both;
}
form {
    width: 70%;
}
form input {
    float: left;
}
form input #yes,
form input #no {
    display: inline;
    float: none;
}
form label[for="yes"],
form label[for="no"] {
    display: inline;
}

＆＃13;

<form>
  <label for="fname">First name:</label>
  <input id="fname" name="fname" type="text">
  <label for="lname">Last name:</label>
  <input id="lname" name="lname" type="text">
  <label for="email">What is your email address?</label>
  <input id="email" name="email" type="email">
  <label for="when">When did it happen?</label>
  <input id="when" name="when" type="text">
  <label for="howlong">How long were you gone?</label>
  <input id="howlong" name="howlong" type="text">
  <label for="howmany">How many did you see?</label>
  <input id="howmany" name="howmany" type="text">
  <label for="desc">Describe them:</label>
  <input id="desc" name="desc" type="text">
  <label for="whatdo">What did they do to you?</label>
  <input id="whatdo" name="whatdo" type="text">
  <label for="seen">Have you seen my dog Fang?</label>
  <label for="yes">Yes</label>
  <input id="yes" name="seen" type="radio" value="yes">
  <label for="no">No</label>
  <input id="no" name="seen" type="radio" value="no">
</form>

＆＃13;

＆＃13;

＆＃13;

我希望用CSS而不是HTML来实现这一目标。有些答案可以解释如何通过重构HTML来实现，但我希望保持相同的HTML结构。

Answer 1

只需重置那些标签和输入元素上的一些规则。

form label[for="yes"],
form label[for="yes"] + input,
form label[for="no"],
form label[for="no"] + input {
  clear: none;
  width: auto;
}

＆＃13;

＆＃13;

form label {
  width: 225px;
  font-weight: bold;
  float: left;
  clear: both;
}
form {
  width: 70%;
}
form input {
  float: left;
}
form label[for="yes"],
form label[for="yes"] + input,
form label[for="no"],
form label[for="no"] + input {
  clear: none;
  width: auto;
}

＆＃13;

<form>
  <label for="fname">First name:</label>
  <input id="fname" name="fname" type="text">
  <label for="lname">Last name:</label>
  <input id="lname" name="lname" type="text">
  <label for="email">What is your email address?</label>
  <input id="email" name="email" type="email">
  <label for="when">When did it happen?</label>
  <input id="when" name="when" type="text">
  <label for="howlong">How long were you gone?</label>
  <input id="howlong" name="howlong" type="text">
  <label for="howmany">How many did you see?</label>
  <input id="howmany" name="howmany" type="text">
  <label for="desc">Describe them:</label>
  <input id="desc" name="desc" type="text">
  <label for="whatdo">What did they do to you?</label>
  <input id="whatdo" name="whatdo" type="text">
  <label for="seen">Have you seen my dog Fang?</label>
  <label for="yes">Yes</label>
  <input id="yes" name="seen" type="radio" value="yes">
  <label for="no">No</label>
  <input id="no" name="seen" type="radio" value="no">
</form>

＆＃13;

＆＃13;

＆＃13;

或者，只需选择所有无线电输入元素。

form label[for="yes"],
form label[for="no"],
form input[type="radio"] {
  clear: none;
  width: auto;
}

＆＃13;

＆＃13;

form label {
  width: 225px;
  font-weight: bold;
  float: left;
  clear: both;
}
form {
  width: 70%;
}
form input {
  float: left;
}
form label[for="yes"],
form label[for="no"],
form input[type="radio"] {
  clear: none;
  width: auto;
}

＆＃13;

<form>
  <label for="fname">First name:</label>
  <input id="fname" name="fname" type="text">
  <label for="lname">Last name:</label>
  <input id="lname" name="lname" type="text">
  <label for="email">What is your email address?</label>
  <input id="email" name="email" type="email">
  <label for="when">When did it happen?</label>
  <input id="when" name="when" type="text">
  <label for="howlong">How long were you gone?</label>
  <input id="howlong" name="howlong" type="text">
  <label for="howmany">How many did you see?</label>
  <input id="howmany" name="howmany" type="text">
  <label for="desc">Describe them:</label>
  <input id="desc" name="desc" type="text">
  <label for="whatdo">What did they do to you?</label>
  <input id="whatdo" name="whatdo" type="text">
  <label for="seen">Have you seen my dog Fang?</label>
  <label for="yes">Yes</label>
  <input id="yes" name="seen" type="radio" value="yes">
  <label for="no">No</label>
  <input id="no" name="seen" type="radio" value="no">
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 2

＆＃13;

＆＃13;

form label {
    width: 225px;
    font-weight: bold;
    float: left;
    clear: both;
}
form {
    width: 70%;
}
form input {
    float: left;
}
form .radio{
    display: inline-block;
    float: left;
width: 25px;
clear:none
}

＆＃13;

<form>
  <label for="fname">First name:</label>
  <input id="fname" name="fname" type="text">
  <label for="lname">Last name:</label>
  <input id="lname" name="lname" type="text">
  <label for="email">What is your email address?</label>
  <input id="email" name="email" type="email">
  <label for="when">When did it happen?</label>
  <input id="when" name="when" type="text">
  <label for="howlong">How long were you gone?</label>
  <input id="howlong" name="howlong" type="text">
  <label for="howmany">How many did you see?</label>
  <input id="howmany" name="howmany" type="text">
  <label for="desc">Describe them:</label>
  <input id="desc" name="desc" type="text">
  <label for="whatdo">What did they do to you?</label>
  <input id="whatdo" name="whatdo" type="text">
  <label for="seen">Have you seen my dog Fang?</label>
  <label class="radio" for="yes">Yes</label>
  <input class="radio" id="yes" name="seen" type="radio" value="yes">
  <label class="radio" for="no">No</label>
  <input class="radio" id="no" name="seen" type="radio" value="no">
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 3

嗯，您的clear: both规则中有form label，因此每个标签都会以新行开头。在CSS规则包含clear: none

的最后三个标签中添加其他类

Answer 4

我认为这就是你想要的，不需要css，只需使用表

<form>
  <table>
    <tr><td>
    <strong>First Name:</strong>
    </td></tr>
    <tr><td>
    <input id="fname" name="fname" type="text">
    </td></tr>
    <tr><td>
    <strong>Last Name:</strong>
    </td></tr>
    <tr><td>
    <input id="lname" name="lname" type="text">
    </td></tr>
    <tr><td>
    <strong>What is your email address?</strong>
    </td></tr>
    <tr><td>
    <input id="email" name="email" type="text">
    </td></tr>
    <tr><td>
    <strong>When did it happen?</strong>
    </td></tr>
    <tr><td>
    <input id="when" name="when" type="text">
    </td></tr>
    <tr><td>
    <strong>How long where you gone?</strong>
    </td></tr>
    <tr><td>
    <input id="howlong" name="howlong" type="text">
    </td></tr>
    <tr><td>
    <strong>How many did you see?</strong>
    </td></tr>
    <tr><td>
    <input id="howmany" name="howmany" type="text">
    </td></tr>
    <tr><td>
    <strong>Describe them:</strong>
    </td></tr>
    <tr><td>
    <input id="desc" name="desc" type="text">
    </td></tr>
    <tr><td>
    <strong>What did they do?</strong>
    </td></tr>
    <tr><td>
    <input id="whatdo" name="whatdo" type="text">
    </td></tr>
    <tr><td>
    <strong>Have you seen my dog Fang?</strong>
    </td></tr>
    <tr><td>
    <input id="yes" name="seen" type="radio" value="yes">Yes
    <input id="no" name="seen" type="radio" value="no">No
    </td></tr>
  </table>
</form>