當插入值時沒有按鈕向下移動textarea和按鈕對齊

Question

我想對齊同一行上的文本區域和按鈕。我已經成功地做到了這一點，代碼在下面的小提琴（儘管由於某種原因小提琴不會對齊它們）。

問題：無論何時我在按鈕中插入一個值，該按鈕將向下移動30px，仍在同一行上，但低於文本區域。這隻會在按鈕內插入一個值時纔會發生。

所有的代碼是在小提琴：https://jsfiddle.net/13qy0acp

代碼：

HTML

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

CSS

#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:20px; 
text-decoration:none; 
} 

Answer 1

如果要水平對齊兩個元素，使用float屬性，並設置一個不增加的寬度比父元素的寬度的100％。

例如：

textarea { 
    width:90%; 
    float: left; 
} 
button { 
    width:10%; 
    float: left; 
}