如何解决如何在同一行上将多个复选框与其各自的文本对齐?
我制作了一个带有一些复选框的表单,并且带有文本的复选框被内联显示:
我想做的是每行显示一个复选框,每行文本,因此我尝试为所有复选框和CSS内的类创建一个类,并添加了display:block:
.checkbox {
display: block;
}
据我所读,最好避免一直在HTML中使用br标签,并尝试在CSS中尽可能多地进行样式设置。
但是,这是发生了什么
当尝试在线搜索此问题时,我只是获得有关如何将多个复选框/字段对齐到同一行的结果。
这是HTML:
<p>What would you like to see improved? (Check all that apply)</p>
<label for="frontEnd">
<input type="checkbox" class="checkbox" id="frontEnd" value="frontEnd">Front-end Projects</input>
<label for="frontEnd">
<input type="checkbox" class="checkbox" id="backEnd" value="backEnd">Back-end Projects</input>
<input type="checkbox" class="checkbox" id="dataVisualization" value="frontEnd">Data Visualization</input>
<input type="checkbox" class="checkbox" id="challengesImproved" value="challengesImproved">Challenges</input>
<input type="checkbox" class="checkbox" id="openSourceCommunity" value="openSourceCommunity">Open Source Community</input>
<input type="checkbox" class="checkbox" id="gitterHelpRooms" value="gitterHelpRooms">Gitter help rooms</input>
<input type="checkbox" class="checkbox" id="videos" value="videos">Videos</input>
<input type="checkbox" class="checkbox" id="cityMeetups" value="cityMeetups">City Meetups</input>
<input type="checkbox" class="checkbox" id="wiki" value="wiki">Wiki</input>
<input type="checkbox" class="checkbox" id="forum" value="forum">Forum</input>
<input type="checkbox" class="checkbox" id="additionalCourses" value="additionalCourses">Additional Courses</input>
解决方法
类似的方法可以工作,但是还有其他方法
label {
display: block;
}
<label>
<input type="checkbox" name="" id="">
Ola3
</label>
<label>
<input type="checkbox" name="" id="">
Ola1
</label>
<label>
<input type="checkbox" name="" id="">
Ola2
</label>
,
在该复选框中将<input type="checkbox">
和<label>
放入<div>
。
<div>
<input type="checkbox" id="first">
<label for="first">First</label>
</div>
<div>
<input type="checkbox" id="second">
<label for="second">Second</label>
</div>
通过这种方式,您无需设置容器样式,因为<div>
默认具有display: block
。
编辑:我的错误在评论中指出。在输入中添加了ID。
,方法-1-使用display:block;
label {display:block;}
<p>What would you like to see improved? (Check all that apply)</p>
<label for="frontEnd">
<input type="checkbox" class="checkbox" id="frontEnd" value="frontEnd">Front-end Projects</input>
<label for="frontEnd">
<input type="checkbox" class="checkbox" id="backEnd" value="backEnd">Back-end Projects</input>
<label for="frontEnd">
<input type="checkbox" class="checkbox" id="dataVisualization" value="frontEnd">Data Visualization</input>
<label for="frontEnd">
<input type="checkbox" class="checkbox" id="challengesImproved" value="challengesImproved">Challenges</input>
<label for="frontEnd">
<input type="checkbox" class="checkbox" id="openSourceCommunity" value="openSourceCommunity">Open Source Community</input>
<label for="frontEnd">
<input type="checkbox" class="checkbox" id="gitterHelpRooms" value="gitterHelpRooms">Gitter help rooms</input>
<label for="frontEnd">
<input type="checkbox" class="checkbox" id="videos" value="videos">Videos</input>
<label for="frontEnd">
<input type="checkbox" class="checkbox" id="cityMeetups" value="cityMeetups">City Meetups</input>
<label for="frontEnd">
<input type="checkbox" class="checkbox" id="wiki" value="wiki">Wiki</input>
<label for="frontEnd">
<input type="checkbox" class="checkbox" id="forum" value="forum">Forum</input>
<label for="frontEnd">
<input type="checkbox" class="checkbox" id="additionalCourses" value="additionalCourses">Additional Courses</input>
方法-2:使用<br>
<p>What would you like to see improved? (Check all that apply)</p>
<label for="frontEnd">
<input type="checkbox" class="checkbox" id="frontEnd" value="frontEnd">Front-end Projects</input>
<br>
<label for="frontEnd">
<input type="checkbox" class="checkbox" id="backEnd" value="backEnd">Back-end Projects</input>
<br>
<label for="frontEnd">
<input type="checkbox" class="checkbox" id="dataVisualization" value="frontEnd">Data Visualization</input>
<br>
<label for="frontEnd">
<input type="checkbox" class="checkbox" id="challengesImproved" value="challengesImproved">Challenges</input>
<br>
<label for="frontEnd">
<input type="checkbox" class="checkbox" id="openSourceCommunity" value="openSourceCommunity">Open Source Community</input>
<br>
<label for="frontEnd">
<input type="checkbox" class="checkbox" id="gitterHelpRooms" value="gitterHelpRooms">Gitter help rooms</input>
<br>
<label for="frontEnd">
<input type="checkbox" class="checkbox" id="videos" value="videos">Videos</input>
<br>
<label for="frontEnd">
<input type="checkbox" class="checkbox" id="cityMeetups" value="cityMeetups">City Meetups</input>
<br>
<label for="frontEnd">
<input type="checkbox" class="checkbox" id="wiki" value="wiki">Wiki</input>
<br>
<label for="frontEnd">
<input type="checkbox" class="checkbox" id="forum" value="forum">Forum</input>
<br>
<label for="frontEnd">
<input type="checkbox" class="checkbox" id="additionalCourses" value="additionalCourses">Additional Courses</input>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。