Question

我想创建一个带输入的新表单。 2个第一个输入应为50％，因此它们彼此相邻，其余100％。盒子彼此相邻，宽度为49％，但在移动屏幕上，它们相互叠加。

我添加了JS Fiddle来证明我的问题。

<input class="inputstyle" NAME="name" placeholder="Name" style="width:50%;border:2px solid #000;" value="name">
<input class="inputstyle" NAME="lastname" placeholder="Last name" style="width:50%;border:2px solid #000;" value="lastname">
<input class="inputstyle" NAME="birthplace" placeholder="Birthplace" style="width:100%;border:2px solid #000;" value="birthplace">

在计算机上50％并不等于100％输入

我很感激任何帮助！

Answer 1

你最需要考虑边界和填充。 box-sizing:border-box;对此

有用

https://jsfiddle.net/of1fL7bv/2/

Answer 2

或者，您可以使用CSS calc()函数从总宽度中减去边框大小，如下所示：

JS Fiddle

.inputstyle {
  /* full width */
  width:calc(100% - 4px); /* 4px because 2px border left + 2px border right */
  margin-top:1%;height:30px;background-color:#FFF;float:left;
  border:2px solid #000;
}
.half-width {
  /* half width */
  width:calc(50% - 4px);
}

<input class="inputstyle half-width" NAME="name" placeholder="Name" value="name">
<input class="inputstyle half-width" NAME="lastname" placeholder="Last name" value="lastname">
<input class="inputstyle" NAME="birthplace" placeholder="Birthplace" value="birthplace">

具有边界响应失败的输入

2 个答案: