我正在尝试将复选框堆叠到页面的左侧。任何帮助将非常感激。这是我到目前为止所拥有的:
<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>
</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;
}
最佳答案
为了改进标记的语义并解决您的特定问题，我建议:
更新您输入的标记以具有
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元素。这些不是必需的，也不会为代码的语义增加任何值(value)。用label包装您的输入和文本使文本可点击(允许通过点击该文本而不仅仅是输入本身来选择复选框/单选按钮)并与适当的字段相关联。在您的 CSS 中添加以下内容:
.pure-form label {display: block; clear: left} .pure-form input {float: left;}
关于html - CSS 复选框堆叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25515267/