将输入排列成相等的长度

Question

我有多行输入

<input type="text" style="width: 50px;">
<br>
<input type="text" style="width: 25px;">
<input type="text" style="width: 25px;">

不幸的是,25+25 != 50因为它们之间存在空间,每个浏览器都有所不同.

问题:如何设置输入的样式2x25具有相同的长度1x50

Answer 1

用于box-sizing: border-box所有输入元素,并确保避免两个元素之间的白色间距.一种方法是让inputs在同一行或另一行(首选且更易读)的方式是在两者之间添加注释.

.full {
  width: 50px;
  box-sizing: border-box;
}

.half {
  width: 25px;
  box-sizing: border-box;
}

<input type="text" class="full">
<br>
<input type="text" class="half"><!--
--><input type="text" class="half">