Question

我正在尝试将复选框堆叠到页面的左侧。任何帮助将非常感激。这是我到目前为止所做的：

<body>
  <h1>Fitness Survey</h1>
    <form class="pure-form" name="survey" method="post"action="mailto:email@youraddress.com" enctype="text/plain">
      <fieldset>
        <legend>Do you belong to a gym or fitness center?</legend>
        <p>
          <input type="radio" name="gym" value="yes">Yes
          <input type="radio" name="gym" value="no">No
          <br>
        </p>
      </fieldset>
      <fieldset>
        <legend>How do you stay in shape?</legend>
        <p>
           <input type="checkbox" name="exercises" value="classes">Fitness classes
           <input type="checkbox" name="exercises" value="weights">Weights
           <input type="checkbox" name="exercises" value="jogging">Jogging
           <input type="checkbox" name="exercises" value="cardio machines">Cardiovascular machines
           <input type="checkbox" name="exercises" value="swimming">Swimming
           <input type="checkbox" name="exercises" value="team sports">Team sports
           <input type="checkbox" name="exercises" value="other">Other
           <br>
         </p>
       </fieldset>
       <fieldset>
         <legend>How often do you exercise?</legend>
         <p>
           <input type="radio" name="frequency" value="once per week">Once per week
           <input type="radio" name="frequency" value="2-3 per week">2-3 times per week
           <input type="radio" name="frequency" value="4-6 per week">4-6 times per week
           <input type="radio" name="frequency" value="every day">Every day<br>
         </p>
       </fieldset>
       <fieldset>
         <legend><strong>Why do you exercise?</strong></legend>
         <p>
           <input type="checkbox" name="why" value="pleasure">I enjoy it
           <input type="checkbox" name="why" value="fitness">I want to keep fit<br>&nbsp;
         </p>
       </fieldset>
       <p>
         <input type="submit"><input type="reset">
       </p>
     </form>
  </body>
</html>

CSS是：

fieldset {
  width: 400px;
  border: 2px ridge #ff0000;
  padding: 10px;
  margin-bottom: 10px;
}

legend {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: bold;
}

input {
  font-family: Arial, sans-serif;
}

Answer 1

JSFiddle with the example

为了改善标记的语义并解决您的特定问题，我建议：

更新输入的标记，使其具有label元素，例如：
```
<fieldset>
    <legend>Do you belong to a gym or fitness center?</legend>
    <label><input type="radio" name="gym" value="yes" />Yes</label>
    <label><input type="radio" name="gym" value="no" />No</label>
</fieldset>
```
请注意缺少<br>和p元素。这些不是必需的，也没有为代码的语义添加任何值。使用label包装您的输入和文本会使文本可单击（允许通过单击该文本而不仅仅是输入本身来选择复选框/单选按钮）并与相应的字段关联。

在CSS中添加以下内容：

.pure-form label {display: block; clear: left}
.pure-form input {float: left;}

CSS Checkbox堆叠

1 个答案: