Html 如何在左侧一行接一行地设置所有复选框及其标签？_Html_Css_Font Awesome

Html 如何在左侧一行接一行地设置所有复选框及其标签？

html css

Html 如何在左侧一行接一行地设置所有复选框及其标签？,html,css,font-awesome,Html,Css,Font Awesome,我正在学习HTML和CSS。我正在尝试设计一个网页来练习HTML和CSS。我正在尝试添加多个复选框，并在左侧的新行中添加标签。但我不能我想设计一个如下图所示的页面：但复选框不会向左移动。下面是我的设计。 HTML： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv=&qu

我正在学习HTML和CSS。我正在尝试设计一个网页来练习HTML和CSS。我正在尝试添加多个复选框，并在左侧的新行中添加标签。但我不能

我想设计一个如下图所示的页面：

但复选框不会向左移动。下面是我的设计。

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Project 05</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="headings">
            <h1 >freeCodeCamp Survey Form</h1>
            <h3><em>Thank you for taking the time to help us improve the platform</em></h3>
        </div>
        <div class="form-container">
            <label for="">Name</label>
            <input type="text" required>
            <label for="">Email</label>
            <input type="email" required>
            <label for="">Age (optional)</label>
            <input type="number" required>
            <label for="">Which option best describes your current role?</label>
            <select name="" id="">
                <option disabled> Select an option</option>
                <option class="container" value="challenges">Challenges</option>
                <option class="container" value="projects">Projects</option>
                <option class="container" value="community">Community</option>
                <option class="container" value="opensource">Opensource</option>
            </select>
            <label for="">What is your favorite feature of freeCodeCamp?</label>
            <label class="checkboxes"><input type="checkbox"> One</label>
            <label class="checkboxes"><input type="checkbox"> Two</label>
            <label class="checkboxes"><input type="checkbox"> Three</label>
        </div>
    </div>
</body>
</html>

我该怎么做？请帮助我如何使用CSS进行设计。

欢迎学习html。代码中确实存在一些问题，您可以做得更好。我只提到你要求的最后一部分


//##### HTML (part)

<!-- 
Semantic: this is not a label, it is a (sub)heading
Change tag to a 'h?' and style it
-->

<h2>What is your favorite feature of freeCodeCamp?</h2>

<!--
Your inputs are general styled to have 100% width.
So following elements move to next line.
No good/clean solution.
Here: checkboxes are inputs and now move your elements in unwanted direction.
And they have margin bottom.
Quick workarround here: 
Overwrite css for checkboxes
Add linebreaks at the end of the line to move following labels/checkboxes to next line
-->

<label class="checkboxes"><input type="checkbox"> One</label><br>
<label class="checkboxes"><input type="checkbox"> Two</label><br>
<label class="checkboxes"><input type="checkbox"> Three</label><br>


//#### CSS - overwriting general stylings

input[type=checkbox] {
    width: auto;
    height: inherit;
    margin-bottom: 0;
}


//#####HTML（部分）
你最喜欢的freeCodeCamp功能是什么？
一个

两个

三个

//####CSS-覆盖常规样式
输入[类型=复选框]{
宽度：自动；
身高：继承；
页边距底部：0；
}

正如@StefanBob提到的，复选框没有对齐到表单的左侧，因为在所有

元素上都声明了

宽度：100%

。我知道您希望名称/电子邮件/年龄字段保持100%的宽度，因此您可以使用

将width:auto
添加到复选框
。复选框在样式表中输入{width:auto}

如果希望它模仿图像中包含的复选框的外观，可以在复选框输入上添加明确的宽度，如

width:4ch

。最后，为了使表单响应，您可以删除

表单容器上的18rem
左右边距，并将其替换为边距：0 auto
。这样，视口将自动计算左/右边距。要获得与具有左/右18rem页边距的表单相同的宽度，只需利用max width
。现在，您的窗体已响应并可查看所有视口宽度
.form容器{
背景：rgba（27,27,50,0.8）；
保证金：0自动；
最大宽度：65ch；/*模板的最大宽度*/
填料：2米；
文本对齐：左对齐；
边界半径：5px；
}
.复选框{
显示器：flex；
对齐项目：居中；
调整内容：灵活启动；
}
.复选框输入{
/*宽度：自动*/
宽度：4ch；/*定义一个显式宽度*/
页边距底部：0；
左边距：0；
右边距：.25rem；/*控制复选框和文本之间的间距*/
}


正文{
背景：线性梯度（rgba（68,28,179,0.753），rgba（68,28,179,0.753）），url（./survey form background.jpeg）无重复中心固定，rgba（68,28,179,0.753）；；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}
.集装箱{
字号：1rem；
字体大小：400；
线高：1.4；
字体系列：“Poppins”，无衬线；
}
.标题{
颜色：白色；
文本对齐：居中；
}
.表格容器{
背景：rgba（27,27,50,0.8）；
保证金：0自动；
最大宽度：65ch；/*模板的最大宽度*/
填料：2米；
文本对齐：左对齐；
边界半径：5px；
}
标签{
颜色：白色；
显示器：flex；
字体大小：1.125rem；
边缘底部：10px；
}
输入{
宽度：100%；
高度：1.5雷姆；
填充：0.375rem 0.01rem；
背景色：#fff；
边框：1px实心#ced4da；
边界半径：0.25雷姆；
边缘底部：30px；
}
挑选{
宽度：100%；
身高：2.4rem；
填充：0.375rem 0.01rem；
背景色：#fff；
边框：1px实心#ced4da；
边界半径：0.25雷姆；
边缘底部：30px；
}
.复选框{
显示器：flex；
对齐项目：居中；
调整内容：灵活启动；
}
.复选框输入{
/*宽度：自动*/
宽度：4ch；/*定义一个显式宽度*/
页边距底部：0；
左边距：0；
右边距：.4rem；/*控制复选框和文本之间的间距*/
}

项目05
freeCodeCamp调查表
感谢您抽出时间帮助我们改进平台
名称
电子邮件
年龄（可选）
哪个选项最能描述您当前的角色？
选择一个选项
挑战
项目
社区
开源
你最喜欢的freeCodeCamp功能是什么？
一个
两个
三
从CST中的输入中删除宽度：100%非常感谢您，先生。我只是个初学者。你回答了我想问的问题，也学到了一些重要的东西。“你太好了！”达巴南达米特拉，欢迎你。快乐编码！

//##### HTML (part)

<!-- 
Semantic: this is not a label, it is a (sub)heading
Change tag to a 'h?' and style it
-->

<h2>What is your favorite feature of freeCodeCamp?</h2>

<!--
Your inputs are general styled to have 100% width.
So following elements move to next line.
No good/clean solution.
Here: checkboxes are inputs and now move your elements in unwanted direction.
And they have margin bottom.
Quick workarround here: 
Overwrite css for checkboxes
Add linebreaks at the end of the line to move following labels/checkboxes to next line
-->

<label class="checkboxes"><input type="checkbox"> One</label><br>
<label class="checkboxes"><input type="checkbox"> Two</label><br>
<label class="checkboxes"><input type="checkbox"> Three</label><br>


//#### CSS - overwriting general stylings

input[type=checkbox] {
    width: auto;
    height: inherit;
    margin-bottom: 0;
}