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

Question

我正在学习 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

body {
    background: linear-gradient(rgba(68, 28, 179, 0.753), rgba(68, 28, 179, 0.753)), url(./survey-form-background.jpeg) no-repeat center center fixed, rgba(68, 28, 179, 0.753);; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.container {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
    font-family: 'Poppins', sans-serif;
}
.headings {
    color: white;
    text-align: center;
}
.form-container {
    background: rgba(27, 27, 50, 0.8);
    margin-left: 18rem;
    margin-right: 18rem;
    padding: 2em;
    text-align: left;
    border-radius: 5px;
}
label {
    color: white;
    display: flex;
    font-size: 1.125rem;
    margin-bottom: 10px;
}
input {
    width: 100%;
    height: 1.5rem;
    padding: 0.375rem 0.01rem;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    margin-bottom: 30px;
}
select {
    width: 100%;
    height: 2.4rem;
    padding: 0.375rem 0.01rem;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    margin-bottom: 30px;
}
.checkboxes {
    text-align: left;
}

我该怎么做？请帮助我如何使用 CSS.

进行设计

Answer 1

欢迎学习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;
}

Answer 2

正如@StefanBob 提到的那样，复选框没有与表单的左侧对齐，因为您在所有 <input> 元素上声明了 width: 100%。我看到您想为 name/email/age 字段保持 100% 的宽度，因此您只需在样式表中使用 .checkboxes input { width: auto } 将 width: auto 添加到复选框 <input>。

如果您希望它模仿图像中包含的复选框的外观，您可以在复选框输入上添加明确的宽度，例如 width: 4ch。最后，为了使您的表单具有响应性，您可以删除 .form-container 上的 18rem 左右边距，并将其替换为 margin: 0 auto。这样 left/right 边距由视口自动计算。要获得与 left/right 18rem 边距相同的表单宽度，只需使用 max-width。现在您的表单对于所有视口宽度都具有响应性和可见性。

.form-container {
  background: rgba(27, 27, 50, 0.8);
  margin: 0 auto;
  max-width: 65ch; /* max width of form */
  padding: 2em;
  text-align: left;
  border-radius: 5px;
}

.checkboxes {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.checkboxes input {
  /* width: auto; */
  width: 4ch; /* define an explicit width */
  margin-bottom: 0;
  margin-left: 0;
  margin-right: .25rem; /* controls the space between checkbox and text */
}

body {
    background: linear-gradient(rgba(68, 28, 179, 0.753), rgba(68, 28, 179, 0.753)), url(./survey-form-background.jpeg) no-repeat center center fixed, rgba(68, 28, 179, 0.753);; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.container {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
    font-family: 'Poppins', sans-serif;
}
.headings {
    color: white;
    text-align: center;
}
.form-container {
    background: rgba(27, 27, 50, 0.8);
    margin: 0 auto;
    max-width: 65ch; /* max width of form */
    padding: 2em;
    text-align: left;
    border-radius: 5px;
}
label {
    color: white;
    display: flex;
    font-size: 1.125rem;
    margin-bottom: 10px;
}
input {
    width: 100%;
    height: 1.5rem;
    padding: 0.375rem 0.01rem;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    margin-bottom: 30px;
}
select {
    width: 100%;
    height: 2.4rem;
    padding: 0.375rem 0.01rem;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    margin-bottom: 30px;
}
.checkboxes {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.checkboxes input {
  /*width: auto;*/
  width: 4ch; /* define an explicit width */
  margin-bottom: 0;
  margin-left: 0;
  margin-right: .4rem; /* controls the space between checkbox and text */
}

<!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>

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

How to set all checkboxes and its labels on left side one after another line?

html

css

font-awesome