Я пытаюсь выяснить, ПОЧЕМУ 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
элемент является элементом блока, его поле должно содержатьполе кнопки, потому что оно плавающее влево.
элемент ввода имеет ширину родительского элемента 100%, поэтому он должен иметь ширину строки.Поэтому его поле не должно совпадать с линией с кнопкой, поэтому следует ввести разрыв строки ... Но это не так, и все почему-то работает ..., и я не могу понять, почему.И если вы удалите "overflow:auto"
, разрыв строки на самом деле вводит ...