如何将按钮与文本区域对齐答案

【问题标题】：How to align button to text area如何将按钮与文本区域对齐
【发布时间】：2016-08-25 21:56:33
【问题描述】：

正如你在这个小提琴中看到的https://jsfiddle.net/3spqLzx1/1/ 我想将我的文本区域与我的按钮垂直（在同一行）对齐，但按钮一直被向下推。你能告诉我一种让它们对齐的方法吗？谢谢

文本区域 + 按钮 HTML

<p id="headings"><textarea name="msg" style="height:40px;text-align:center"  id="message" placeholder="Insert your message here"></textarea></p>
<p id="button"><input type="button" value="Send" onclick="submitChat()"    id="innerbutton"></p>

CSS

#headings {
text-align:center;
display:inline-block;
width:70% !important;
margin-top:20px;
}
#headings {
text-align:center;
display:inline-block;
width:70% !important;
margin-top:20px;
}
#message {
width:100%;
}
#button {
text-align:center;
display:inline-block;
width:8%;
margin-top:-30px !important;
border:solid black;
height:50px;
}
#innerbutton {
width:100%;
height:50px;
margin-top:25px;
background-color:rgb(22, 33, 211);
text-decoration:none;
margin-bottom:30px;
}

【问题讨论】：

看看 display:flex 和对齐系统。 developer.mozilla.org/en-US/docs/Web/CSS/…
有更好的方法来构建 html，但这应该会有所帮助：jsfiddle.net/3spqLzx1/5

标签： javascript html alignment

【解决方案1】：

以下是更改：

#innerbutton {
...
-margin-top: 25px;
...
}


#button {
...
- margin-top:-30px !important;
+ vertical-align: top;
...
}

jsFiddle

【讨论】：

【解决方案2】：

#headings {
text-align:center;
display:inline-block;
width:70% !important;
margin-top:20px;
}
#message {
width:100%;

}
#button {
 position:absolute; 
margin-top:20px;
text-align:center;
display:inline-block;
width:8%;
margin-top:20px !important;
border:solid black;
height:50px;
}
#innerbutton {
  
width:100%;
height:50px;
margin-top:0px;
background-color:rgb(22, 33, 211);
text-decoration:none;

}

<div id="messagebox">
<p id="headings"><textarea name="msg" style="height:40px;text-align:center" id="message" placeholder="Insert your message here"></textarea></p>
<p id="button"><input type="button" value="Send" onclick="submitChat()" id="innerbutton"></p>
</div>

【讨论】：