如何让表单内textarea与提交按钮同高同行且按比例分配宽度？

这问题我之前做表单的时候也踩过坑，主要是CSS的几个细节没处理到位，导致布局错位。我给你两种靠谱的解决方案，优先推荐第一种，更简洁稳定：

方案一：用Flex布局（推荐） #

Flex布局天生适合这种横向排列的需求，能完美规避inline-block带来的各种问题。直接看代码：

form {
  width: 100%;
  display: flex; /* 启用flex布局 */
}

textarea {
  box-sizing: border-box; /* 关键：width包含padding和border，不会超宽 */
  width: 90%;
  resize: none;
  padding: 8px; /* 和按钮统一内边距，保证高度一致 */
  border: 1px solid #d1d5db;
  font-size: 14px; /* 统一字体大小，避免高度差 */
}

#submit {
  box-sizing: border-box;
  width: 10%;
  padding: 8px;
  border: 1px solid #d1d5db;
  background-color: #f3f4f6;
  font-size: 14px;
  cursor: pointer;
}

<form>
  <textarea placeholder="Text here"></textarea>
  <input id="submit" type="submit" value="Send">
</form>

关键细节说明： #

• flex布局：自动让子元素在同一行，无需处理inline-block的空白间隙和垂直对齐问题；
• box-sizing: border-box：确保设置的width是元素的总宽度（包含padding和边框），90%+10%刚好撑满父容器，不会换行；
• 统一padding、border、font-size：textarea和按钮的默认样式不一样，统一这些属性后，二者的高度会完全匹配；
• 去掉了textarea的cols和rows：用CSS控制尺寸更灵活，避免rows="1"导致textarea高度偏矮。

方案二：兼容旧浏览器的inline-block写法 #

如果需要兼容非常老的浏览器（比如IE9以下），可以用inline-block，但要处理几个坑：

form {
  width: 100%;
  font-size: 0; /* 消除inline-block元素之间的空白间隙 */
}

textarea {
  box-sizing: border-box;
  display: inline-block;
  width: 90%;
  resize: none;
  padding: 8px;
  border: 1px solid #d1d5db;
  font-size: 14px;
  vertical-align: top; /* 关键：对齐到顶部，避免基线错位 */
}

#submit {
  box-sizing: border-box;
  display: inline-block;
  width: 10%;
  padding: 8px;
  border: 1px solid #d1d5db;
  font-size: 14px;
  vertical-align: top;
}

坑点说明： #

• font-size: 0：inline-block元素之间的空白会被解析成空格，导致总宽度超过100%，设置父元素font-size为0可以消除；
• vertical-align: top：inline-block默认是基线对齐，会导致元素错位，设置top就能让二者顶部对齐。

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