Değer eklendiğinde düğmeyi hareket ettirmeden metin ve düğmeyi hizalayın

Question

Bir metin alanını ve aynı satırdaki bir düğmeyi hizalamaya çalışıyorum. Bunu başarılı bir şekilde başardım, kod aşağıdaki kemanın içinde (bazı sebeplerden dolayı keman onları hizalamayacak).

Sorun: Düğmeye bir değer eklediğimde, düğme 30px aşağı, hala aynı hatta ancak metin alanından daha düşük bir değere gider. Bu sadece butona bir değer girildiğinde gerçekleşir. https://jsfiddle.net/13qy0acp

Kodu:

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

İsterseniz yatay iki öğeyi hizalayın kullanmak

tüm kod keman içindedir float mülkü ve artık eklenmeyen bir genişlik ayarlayın Ana elemanın genişliğinin% 100'ünden daha fazla.

örnek:

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