50%宽度inline-block div并排布局遇input子元素换行问题咨询

我之前做表单布局时也踩过一模一样的坑！你说的这两个设置了50%宽度的inline-block元素换行，大概率是空白字符占用宽度、盒模型计算偏差或者表单元素默认样式搞的鬼，给你几个实用的解决方案：

1. 消除inline-block之间的空白字符 #

inline-block元素之间的空格、换行符会被浏览器解析成空白字符，哪怕只有几个像素，也会让两个50%宽度的元素总宽度超过父容器，从而触发换行。

解决办法： #

• 方法一：标签连写
  把两个子元素的HTML标签写在同一行，去掉中间的换行和空格：

  <div class="header__form-contact-left">
    <div class="input-group">...</div><div class="textarea-group">...</div>
  </div>
  

• 方法二：父元素设置font-size: 0
  给父容器设置font-size: 0消除空白字符，再给子元素恢复正常字体大小：

  .header__form-contact-left {
    font-size: 0; /* 消除inline-block间的空白 */
  }
  .header__form-contact-left > div {
    display: inline-block;
    width: 50%;
    font-size: 16px; /* 恢复默认字体大小 */
    vertical-align: top; /* 防止元素对齐差异 */
  }
  

2. 统一盒模型为border-box #

默认情况下，元素的宽度是content-box模式，也就是设置的宽度只包含内容，padding和border会额外增加总宽度。如果你的input/textarea有padding或border，加上50%的宽度，很容易超出父容器。

解决办法： #

给相关元素设置box-sizing: border-box，让padding和border包含在设置的宽度内：

/* 全局设置更省心，现代浏览器都支持 */
* {
  box-sizing: border-box;
}

/* 或者只给需要的元素 */
.header__form-contact-left > div,
.header__form-contact-left input,
.header__form-contact-left textarea {
  box-sizing: border-box;
}

3. 重置表单元素的默认样式 #

部分浏览器的input/textarea有默认的min-width、margin或padding，可能会撑大父元素导致换行。

解决办法： #

给表单元素设置100%宽度，并重置默认样式：

.header__form-contact-left input,
.header__form-contact-left textarea {
  width: 100%;
  margin: 0;
  padding: 0.5rem; /* 按需调整内边距 */
  border: 1px solid #ddd; /* 按需调整边框 */
}

4. 更省心的替代方案：使用Flexbox #

inline-block的布局限制太多，现在更推荐用Flexbox来实现并排布局，完全不用管空白字符和盒模型的坑：

解决办法： #

把父容器改成flex布局：

.header__form-contact-left {
  display: flex;
  /* 可选：设置元素之间的间隙 */
  /* gap: 1rem; */
}
.header__form-contact-left > div {
  width: 50%;
}

这种方式兼容性很好（IE11及以上都支持），布局更稳定，后续调整也更灵活。

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