Question

在下面的示例中，我试图找出为什么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>

当我阅读它时.. 按钮是浮动的块元素..因此它应该是行的最左边的元素，其框的大小应足以容纳“搜索”字词。

p元素是一个块元素，它的框应包含按钮的框，因为它是向左浮动的。

input元素具有其父元素的100％宽度，因此它应该是该行的宽度。所以它的盒子不应该放在带按钮的行上，所以应该引入换行符...但是它不行，并且由于某种原因一切都在起作用。，我不知道为什么。而且，如果您删除"overflow:auto"，则换行符实际上会引入...

Answer 1

它是因为float：left;和p标签的溢出

如果您尝试将溢出移至输入输入表单将位于折线上，并且将为100％；

外观：https://jsfiddle.net/qgykwxea/

代码：

button {
    float: left;
}

input {
    width: 100%; overflow-x:auto;
}

为什么这个HTML起作用

1 个答案: