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

标签应该是输入的同级

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

Answer 2

尝试一下

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

如何对齐复选框/单选按钮元素？

2 个答案: