[英]How to align button to text area
As you can see in this fiddle https://jsfiddle.net/3spqLzx1/1/ I would like to align vertically (on the same line) my text area with my button, but the button keeps on being pushed downwards. 你可以在这个小提琴中看到https://jsfiddle.net/3spqLzx1/1/我想用我的按钮垂直(在同一行)我的文本区域对齐,但按钮继续被向下推。 Could you please tell me a way to make them align?
你能告诉我一种让它们对齐的方法吗? Thank you
谢谢
Text area + Button HTML 文本区域+按钮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 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;
}
#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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.