创建一个 html 表单并遇到宽度问题答案

【问题标题】：Creating a html-form and got problems with the width创建一个 html 表单并遇到宽度问题
【发布时间】：2021-09-09 20:03:39
【问题描述】：

我想创建一个简单的调查表，但遇到了宽度问题。文本字段大约比我创建的调查表单框大 10 像素。我不明白我在css文件中将它设置为宽度：100%。问题出在哪里？

.survey-form {
  width: 50%;
  margin-left: 30%;
  margin-right: 30%;
  background: blue;
}

.form-control {
  width: 100%;
}

<html>

<head>
  <meta charset="utf-8">
  <title>Bin</title>
</head>

<body>
  <form class="survey-form">
    <label for="name">Name</label>
    <input class="name form-control" type="text" placeholder="Name" />
  </form>
</body>
<html>

The width from the textfield is not the same as the blue box

【问题讨论】：

你的类“name form-control”在你的 CSS 中不存在。我建议不要在类名和 id 等 html 说明符中使用空格。你在哪里包含你的样式表？
OP在css中有class form-control，你可以为一个元素添加多个class

标签： html css forms

【解决方案1】：

您应该在.form-control 中分配box-sizing 属性

.form-control {
      width: 100%;
      box-sizing: border-box;
}

仅供参考

【讨论】：

或将其添加到通用选择器中

【解决方案2】：

你可以使用 box-sizing

.survey-form {
    width: 50%;
    margin-left: 30%;
    margin-right: 30%;
    background: blue;
    position:relative;
}

.form-control{
  display:block;
  width:100%;
  box-sizing: border-box;
}

<html>
    <head>
        <meta charset="utf-8">
        <title>Bin</title>
    </head>
    
    <body>
        <form class="survey-form">
            <label for="name">Name</label>
            <input class="name form-control" type="text" placeholder="Name"/>
        </form>
    </body>
<html>

【讨论】：