使用占位符设计输入

Question

我即将自杀，因为我无法将此输入全宽。无论如何，这是我的代码：

.outer{
  background: #111;
  width: 600px;
  text-align: center;
  margin 20px auto;
  border-radius: 20px;
  padding: 20px;
}
input{
  width: 100%;
  padding: 10px;
  color: white;
  background: #333;
  border: 2px solid #666;
  border-radius: 10px;
}

这是我的HTML代码：

<div class="outer"><form action="" method="post">
  <input name="name" placeholder="Your Name">
</form></div>

我对这些代码有疑问。我写宽度：100％，但输入超过600px。我将在响应式模板中使用它。所以我必须这样做。但我无法做到！如果我删除填充，那么它看起来很正常。但我需要填充代码。我该怎么办？

Answer 1

如果您在输入样式中添加box-sizing并从.outer移除宽度，则为100％。

<强> CSS：

.outer{
  background: #111;
  text-align: center;
  margin 0px auto;
  border-radius: 20px;
  padding: 20px;
}

input{
  width: 100%;
  padding: 10px;
  color: white;
  background: #333;
  border: 2px solid #666;
  border-radius: 10px;
  -webkit-box-sizing : border-box;‌​
  -moz-box-sizing : border-box;
  box-sizing : border-box;
}

这是working fiddle。