如您在此小提琴中看到的,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;
}
最佳答案
更改如下:
#innerbutton {
...
-margin-top: 25px;
...
}
#button {
...
- margin-top:-30px !important;
+ vertical-align: top;
...
}
jsFiddle