Question

我尝试将我的textarea和表单中的提交按钮设置为相同的行（和高度），这样文本区域占据宽度的90％，提交按钮占用10％，但我得到的是以下内容：

＆＃13;

textarea {
display:inline-block;
width:90%;
resize:none;
}
#submit {
display:inline-block;
width:10%;
margin-bottom:-10px
}

＆＃13;

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

＆＃13;

如何修复它以使按钮和textarea是同一条线，并占据相同的高度？

由于

Answer 1

使用Route::any('chatbot', 'ChatbotController@index');

＆＃13;

display:flex

＆＃13;

form{
  display:flex
}

textarea {
  display:inline-block;
  width:90%;
  resize:none;
}

#submit {
  display:inline-block;
  width:10%;
  margin-bottom:-10px
}

＆＃13;

Answer 2

问题是元素的边框以及它们的默认边距/填充增加了它们的大小。因此它们大于90％或10％。

解决方案是使用box-sizing：border-box来防止边距和填充增加值到大小或使用较低的百分比，如85％和8％或类似的东西。

修改阅读更多信息： https://www.w3schools.com/css/css_boxmodel.asp

Answer 3

您也可以触摸提交按钮的高度使它们相等：）

form{
display:flex
}
textarea {
display:inline-block;
width:80%;
resize:none;
}
#submit {
display:inline-block;
width:15%;
height: 21px;
margin-bottom:-10px
}

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

Answer 4

最简单的是使用display flex。您也可以删除display: inline-block和margin-bottom，并将项目置于align-items: center的中心位置。

form {
  display: flex;
  align-items: center;
}

textarea {
  width: 90%;
  resize: none;
}

#submit {
  width: 10%;
}

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

Answer 5

在表单上使用display: flex;并删除`display：inline-block＆＃39;

中的元素的风格

https://jsfiddle.net/zbwv9q97/

form{
  display:flex
}

textarea {
  width:90%;
  resize:none;
}

#submit {
  width:10%;
}

Answer 6

使用box-model和display: flex的组合。这两个元素现在都在同一条线上并且高度相同，正如您所要求的那样：）

* {
  box-sizing: border-box;
}

form {
	display: flex;
}

textarea {
  display: inline-block;
  width: 90%;
  resize: none;
}

#submit {
  display: inline-block;
  width: 10%;
}

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

textarea和提交按钮相同的高度和相同的行

6 个答案: