如何对齐复选框/无线电按钮元素

Question

我只是为FCC上的项目创建调查表。

我尝试将<input>标签放入<label>中，也使用<fieldset>，但没有任何效用。

<p id="purpose">
  <label for="business"><input id="business" type="radio" name="purpose" value="business" checked> business</label>
  <label for="leisure"><input type="radio" id="leisure" name="purpose" value="leisure">Leisure</label>
  <label for="passingby"><input type="radio" id="passingby" name="purpose" value="passingby">Passing by</label>
  <label for="others"><input type="radio" id="others" name="purpose" value="others">others</label>
</p>
<p class="improve">What do we need to improve?</p>
<label for="food"><input type="checkbox" id="food" name="food">Food</label>
<label for="rooms"><input type="checkbox" id="rooms" name="rooms">Rooms</label>
<label for="service"><input type="checkbox" id="service" name="service">Service</label>
<label for="none"><input type="checkbox" id="none" name="none">None</label>

Answer 1

尝试此

<form action="">
  <input type="radio" name="purpose" value="business"> business<br>
  <input type="radio" name="purpose" value="leisure"> leisure<br>
  <input type="radio" name="purpose" value="passingby"> passingby<br>
  <input type="radio" name="purpose" value="others"> others<br>
</form>
<p class="improve">What do we need to improve?</p>
<label for="food"><input type="checkbox" id="food" name="food">Food</label> <br>
<label for="rooms"><input type="checkbox" id="rooms" name="rooms">Rooms</label><br>
<label for="service"><input type="checkbox" id="service" name="service">Service</label><br>
<label for="none"><input type="checkbox" id="none" name="none">None</label><br>

Answer 2

标签应为输入的同级

<p id="purpose">
  <input id="business" type="radio" name="purpose" value="business" checked><label for="business"> business</label>
  <input type="radio" id="leisure" name="purpose" value="leisure"><label for="leisure">Leisure</label>
  <input type="radio" id="passingby" name="purpose" value="passingby"><label for="passingby">Passing by</label>
  <input type="radio" id="others" name="purpose" value="others"><label for="others">others</label>
</p>
<p class="improve">What do we need to improve?</p>