Почему этот HTML работает - PullRequest
       4

Почему этот HTML работает

0 голосов
/ 03 октября 2018

Я пытаюсь выяснить, ПОЧЕМУ 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", разрыв строки на самом деле вводит ...

1 Ответ

0 голосов
/ 03 октября 2018

из-за поплавка: слева;и переполнение тега p

, если вы попытаетесь переместить переполнение на вход, форма ввода будет на линии перегиба и будет 100%;

look: https://jsfiddle.net/qgykwxea/

КОД:

button {
    float: left;
}

input {
    width: 100%; overflow-x:auto;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...