html - 我如何设置 textarea 的样式以使其适应该行/div 的内容？

Question

我想弄清楚如何更改 textarea 以便提交按钮和 textarea 位于同一行。

最初，我将其设置为提交按钮位于 div 的右上角，而 textarea 恰好位于它的左侧。但是，我注意到，当我更改浏览器 (Chrome) 的字体大小时，按钮的位置发生了变化，并且溢出到下一行。

目前我有这个:

无论浏览器的设置如何，我都希望“提交”按钮位于右上角。

这是我所拥有的:

form {
  border-bottom: 1px solid #e1e8ed;
  background-color: #fff;
  padding: 10px;
  border-left: 1px solid #e1e8ed;
  border-right: 1px solid #e1e8ed;
}
textarea {
  resize: none;
  font-size: 14px;
  overflow: auto;
  outline: none;
  padding: 8px;
}
#button {
  font-size: 14px;
  display: inline-block;
  height: auto;
  width: auto;
  background-color: #0084B4;
  font-weight: bold;
  color: #fff;
  border-radius: 5px;
  text-align: center;
  margin-top: 2px;
  margin-left: 7px;
  vertical-align: top;
  padding: 5px 16px 5px 16px;
}

<form name="userForm">
  <textarea name="textarea" rows="3" cols="65" placeholder="Enter text here"></textarea>
  <button type="submit" id="button">Submit</button>
</form>

Answer 1

不要在 textarea HTML 标签中使用 cols，而是在 CSS 和 width 中使用 width，使用 calc，所以无论视口(viewport)大小如何，它总是并排显示

form {
  border: 1px solid #e1e8ed;
  border-width:0 1px 1px;
  background-color: #fff;
  padding: 10px;
  width:100%;
  box-sizing:border-box

}
textarea {
  resize: none;
  font-size: 14px;
  overflow: auto;
  outline: none;
  padding: 8px;
  width:calc(100% - 102px);
  box-sizing:border-box
    
}
#button {
  font-size: 14px;
  display: inline-block;
  height: auto;
  width: auto;
  background-color: #0084B4;
  font-weight: bold;
  color: #fff;
  border-radius: 5px;
  text-align: center;
  margin-top: 2px;
  margin-left: 7px;
  vertical-align: top;
  padding: 5px 16px;
}

<form name="userForm">
  <textarea name="textarea" placeholder="Enter text here"></textarea>
  <button type="submit" id="button">Submit</button>
</form>