JQuery追加的两个input无法在同一行对齐的问题排查

这个问题的核心在于替换元素（input）与非替换元素（label）在table布局中的渲染差异，再加上input默认样式的干扰，具体拆解如下：

1. Input的默认最小宽度限制
   input属于替换元素，浏览器会给它设置一个默认的最小宽度（比如Chrome中默认约100px）。你给新增的第一个input添加了.field-name类并指定width:80px，但这个宽度小于input的默认最小宽度，浏览器会直接忽略你的宽度设置，强制使用默认最小宽度。这样两个input的总宽度就会超出.product-attribute的100%容器宽度，自然就会换行。

而原来的label是非替换元素，它的宽度会严格遵循你设置的80px，不受默认最小宽度的约束，所以能和右侧的input正常同行显示。

2. 盒模型未统一导致的宽度溢出
   input默认带有border和padding，如果没有设置box-sizing: border-box，你设置的width值不会包含这些内外边距，实际渲染宽度会比设置值更大，进一步加剧宽度溢出的问题。而label默认没有border和padding，所以不会出现这个问题。

解决方法 #

只需要在CSS中添加以下规则，就能强制覆盖input的默认行为：

/* 统一所有元素的盒模型，确保width包含border和padding */
* {
  box-sizing: border-box;
}

/* 强制约束新增的field-name input的宽度，覆盖默认最小宽度 */
.product-attribute input.field-name {
  width: 80px;
  min-width: 80px;
  /* 可选：去掉input默认边框，和原label样式保持一致 */
  border: none;
  padding: 0;
}

修改后，新增的两个input就会和原来的label+input布局一样，在同一行对齐显示了。

为什么把input放进label里能解决？ #

当你把第一个input放进label中时，label作为table-cell占据80px宽度，里面的input变成了label的子元素，会继承label的宽度限制，不再受自身默认最小宽度的影响，因此能和右侧input正常同行。但既然你不能采用这种方式，上面的CSS修改就能达到同样的效果。

内容的提问来源于stack exchange，提问作者Antonello Gatto