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;
}

插入值时，将textarea和按钮对齐，按钮不向下移动

1 个答案: