我想弄清楚为什么下面示例中的 HTML 代码有效。 目标是将按钮放在行的左侧，并用输入元素填充行的所有现有空间。
我找到了解决方案
<html>
<body>
<style>
button {
float: left;
}
p {
overflow:auto;
}
input {
width: 100%;
}
</style>
<button>Search</button>
<p><input type="text" title="Search" /></p>
</body>
</html>
当我阅读它时.. 按钮是左浮动的 block 元素..所以它应该是行的最左边的元素，其框大小足以容纳“搜索”字词。
p 元素是一个 block 元素，它的框应该包含按钮的框，因为它是向左浮动的。
输入元素的宽度是其父元素的 100%，因此它应该是线条的宽度。所以它的盒子不应该放在带有按钮的线上，所以应该引入换行符......但它没有，并且由于某种原因一切正常......我无法弄清楚为什么。如果您删除 "overflow:auto"，换行符实际上会引入...
最佳答案
是因为 float:left;以及p标签的溢出
如果您尝试将溢出移动到输入 输入表单将位于隔断线上且为 100%；
看:https://jsfiddle.net/qgykwxea/
代码:
button {
float: left;
}
input {
width: 100%; overflow-x:auto;
}
关于html - 为什么这个 HTML 有效，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52624397/