输入中断100％宽度，没有填充或边框

Question

问题

我正在创建一个注册表单，其中包含父项50%的{​​{1}}或100%个输入。

width处的输入需要在同一行上彼此相邻。

我希望它们有填充和边框，但是无论我做什么（甚至完全删除CSS中的填充，边距和边框），它们总是溢出100％并且结果输入进入多行。

代码

50%

.wrapper {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}
.wrapper.c-640 {
  max-width: 640px;
}
input {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
input.w-100 {
  width: 100%;
}
input.w-50 {
  width: 50%;
}
input[type="text"],
input[type="email"],
input[type="password"] {
  display: inline-block;
  padding: 15px 0 15px 8px;
  border-radius: 3px;
  box-shadow: inset 4px 6px 10px -4px rgba(0, 0, 0, 0.3), 0 1px 1px -1px rgba(255, 255, 255, 0.3);
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid black;
  margin-bottom: 10px;

  /* Just for testing and demonstration purposes */
  border: none;
  padding: 0;
  margin: 0;
}

Answer 1

这是内联块元素之间的空间。删除空格或让对象浮动：

float: left;

更多信息：https://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 2

您缺少将浮动规则添加到输入中：

input[type="text"],
input[type="email"],
input[type="password"] {
    float: left;
}

试试这个fiddle