如何在同一行上将多个复选框与其各自的文本对齐？

问题描述

我制作了一个带有一些复选框的表单，并且带有文本的复选框被内联显示：

enter image description here

我想做的是每行显示一个复选框，每行文本，因此我尝试为所有复选框和CSS内的类创建一个类，并添加了display：block：

 .checkbox {

          display: block; 

 }

据我所读，最好避免一直在HTML中使用br标签，并尝试在CSS中尽可能多地进行样式设置。

但是，这是发生了什么

enter image description here

当尝试在线搜索此问题时，我只是获得有关如何将多个复选框/字段对齐到同一行的结果。

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