将输入排列成相等的长度

Question

我有多行输入

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

不幸的是25+25 != 50因为它们之间存在空格，因每个浏览器而异。

问题：如何设置输入样式以获得2x25与1x50具有相同的长度

Answer 1

对所有输入元素使用box-sizing: border-box，并确保避免两个元素之间的白色间距。一种方法是让input s在同一行或另一行（首选且更易读）的方式是在两者之间添加注释。

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;