<!DOCTYPE html>
<html style="height : 100%">
<body style="height : 100%; margin: 0;">
<span style="height : 100%; margin: 0;">
<textarea id="chatbox" readonly="true" style="width : 100%; height : 90%; display : block; margin : 0; border : 0; resize : none;"></textarea>
<textarea id="input" style="width : 95%; height : 10%; border : 1%; display : block; resize : none;"></textarea>
<button id="submit" style="width : 5%; height : 10%;">Submit</button>
</span>
</body>
</html>
按钮坚持停留在第二个文本区域下方。我怎样才能让它附加到第二个文本区域的末尾？
最佳答案
您有许多问题需要更正。
通常认为将样式从内联样式移动到样式表是最佳做法
您的按钮和文本区域是内联元素，组合宽度为 100% - 但是这没有考虑它们的填充、边距或边框，所有这些都会增加额外的宽度 - 因此您需要设置
box-sizing:border-box让他们考虑到这一点您的按钮和文本区域是内联项，在您的 HTML 中它们位于单独的行上 - 这被呈现为一个空格字符，它向行添加更多“宽度”，超过 100% - 更正此设置
display:block然后使用float:left(另一种方法是将它们放在 HTML 的同一行)
Demo Fiddle
将您的 HTML 更改为:
<span>
<textarea id="chatbox" readonly="true"></textarea>
<textarea id="input" ></textarea>
<button id="submit" >Submit</button>
</span>
还有你的 CSS:
span {
height : 100%;
margin: 0;
}
textarea, button {
box-sizing:border-box;
display:block;
float:left;
}
textarea:first-of-type {
width : 100%;
height : 90%;
display : block;
margin : 0;
border : 0;
resize : none;
}
textarea:last-of-type {
width : 95%;
height : 10%;
border : 1%;
resize : none;
}
button {
width : 5%;
height : 10%;
}
关于css - 按钮不适合两个文本区域元素留下的空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23785635/