如何设置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

不要在cols HTML标记中使用textarea而是在CSS width中使用width，请使用calc，因此无论大小如何视口总是并排

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>

Answer 2

更改视口大小时，比例可能会搞砸。您可以通过以百分比设置宽度，边距和填充来避免这种情况。你可以试试这个：

textarea{
    width:60%;
    padding-left:1%;
    padding-right:1%;
    margin-left:0%;
    margin-right:2%;
    float:left;
    display:inline-block;
}

#button {
    width: 30%;
    padding-left:1%;
    padding-right:1%;
    margin-left:0%;
    margin-right:2%;
    float:left;
    display:inline-block;
}

Answer 3

如果没有CSS3的功能，可以解决这个问题：

HTML：

<form>
    <div>
        <textarea></textarea>
    </div>
    <input type="submit">
</form>

CSS：

form {
    position: relative;
}
textarea {
    width: 100%;
}
div {
    margin-right: 6em;
}
input {
    position: absolute;
    top: 0;
    right: 0;
    width: 5em;
}

也可以使用float，但必须更改HTML中元素的顺序。没有CSS在textarea上方提交按钮是不好的，所以我不打算发布它。