输入元素超过其父元素的宽度[重复]答案

【问题标题】：Input element exceeding its parent's width [duplicate]输入元素超过其父元素的宽度[重复]
【发布时间】：2021-11-02 19:53:00
【问题描述】：

我正在尝试创建一个表单，并且在分配我的输入 width=100% 时，它超出了其父元素的宽度。我有点理解box-sizing: border-box 的概念以及width=100% 可能不仅会占用元素的宽度，还会占用它的填充和边框。但是，这就是我感到困惑的地方，我不明白为什么我首先会遇到这个问题，因为我的父元素没有有任何填充或边框。

那为什么我输入的width=100% 超过了我的父元素呢？

另外请忽略整个颜色，因为我对 HTML/CSS 很陌生，我使用它们来更好地理解每个元素容器的区域。

谢谢。

body {
  background-image: linear-gradient(
      rgba(71, 96, 143, 0.7),
      rgba(71, 96, 143, 0.7)
    ),
    url(./images/survey-form-background.jpeg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: white;
  font-family: roboto, sans-serif;
}
#title-subtitle {
  background-color: turquoise;
  margin: 40px 0;
}
#title {
  text-align: center;
  font-size: 1.75em;
  font-weight: 400;
}
#description {
  font-size: 1.25em;
  text-align: center;
  font-style: italic;
  font-weight: 100;
}
#survey {
  background-color: turquoise;
  width: 600px;
  /* margin: 0 auto;
  padding: 40px; */
}
main {
  margin: none;
}
form {
  background-color: orange;
}
.form-container {
  background-color: rgba(221, 30, 30, 0.7);
  margin-bottom: 30px;
}
label {
  font-size: 1.4em;
  /* background-color: white; */
}
input[type="text"] {
  margin-top: 10px;
  display: block;
  /* background-color: beige; */
  width: 100%;
}
input[type="email"] {
  margin-top: 10px;
  display: block;
  /* background-color: beige; */
  width: 100%;
}

<!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" />
    <link rel="stylesheet" href="styles.css" />
    <title>FCC: Survey Form</title>
  </head>
  <body>
    <header id="title-subtitle">
      <h1 id="title">freeCodeCamp Survey Form</h1>
      <p id="description">
        Thank you for taking the time to help us improve the platform
      </p>
    </header>
    <main id="survey">
      <form>
        <div class="form-container">
          <label for="name"
            >Name<input
              type="text"
              id="name"
              name="name"
              placeholder="Enter your name"
              size=
          /></label>
        </div>
        <div class="form-container">
          <label for="email"
            >Email<input
              type="email"
              placeholder="Enter your email"
              id="email"
              name="email"
          /></label>
        </div>
      </form>
    </main>
    <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
  </body>
</html>

enter image description here

【问题讨论】：

输入元素有默认填充（不是父元素）

标签： html css input width padding

【解决方案1】：

添加这个：

input{
    padding: 0.2em; 
    box-sizing: border-box;
    width: 100%;}

这意味着输入框上的边框实际上是在输入宽度的内部，而不是添加到外部。这就是使输入大于容器的原因。

【讨论】：

【解决方案2】：

您可以尝试将标签设置为grid，或flex 与flex-direction: column;：

body {
  background-image: linear-gradient(
      rgba(71, 96, 143, 0.7),
      rgba(71, 96, 143, 0.7)
    ),
    url(./images/survey-form-background.jpeg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: white;
  font-family: roboto, sans-serif;
}
#title-subtitle {
  background-color: turquoise;
  margin: 40px 0;
}
#title {
  text-align: center;
  font-size: 1.75em;
  font-weight: 400;
}
#description {
  font-size: 1.25em;
  text-align: center;
  font-style: italic;
  font-weight: 100;
}
#survey {
  background-color: turquoise;
  width: 600px;
   margin: 0 auto;
  padding: 40px; 
}
main {
  margin: none;
}
form {
  background-color: orange;
}
.form-container {
  background-color: rgba(221, 30, 30, 0.7);
  margin-bottom: 30px;
  max-width: 100%;
}
label {
  font-size: 1.4em;
  min-width: 100%;
  display: grid;
  /*display: flex;
  flex-direction: column;*/
  /* background-color: white; */
}
input {
  margin-top: 10px;
  /* background-color: beige; */
}

<!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" />
    <link rel="stylesheet" href="styles.css" />
    <title>FCC: Survey Form</title>
  </head>
  <body>
    <header id="title-subtitle">
      <h1 id="title">freeCodeCamp Survey Form</h1>
      <p id="description">
        Thank you for taking the time to help us improve the platform
      </p>
    </header>
    <main id="survey">
      <form>
        <div class="form-container">
          <label for="name"
            >Name<input
              type="text"
              id="name"
              name="name"
              placeholder="Enter your name"
              size=
          /></label>
        </div>
        <div class="form-container">
          <label for="email"
            >Email<input
              type="email"
              placeholder="Enter your email"
              id="email"
              name="email"
          /></label>
        </div>
      </form>
    </main>
    <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
  </body>
</html>

【讨论】：