Кнопка опускается при уменьшении ширины браузера - PullRequest
0 голосов
/ 17 июня 2020

У меня есть div, в котором есть три элемента: метка, поле ввода и кнопка. у каждого из них 30 процентов ширины, поэтому они должны стать меньше при изменении размера браузера, но в какой-то момент кнопка будет нажата. Вот код

<!DOCTYPE html>
<html style="height: 100%; margin: 0">
<head>
<title></title>

</head>
<body style="height: 100%; margin: 0">

<div style="width: 30%; height: 20%;  background-color:red; text-align: center; ">
<label style="height: 80%; width: 30%; display: inline-block;">Table No: </label>
<input style="height: 80%; width: 30%" type="text" name="">
<button style="height: 80%; width: 30%">Back</button>
</div>


</body>
</html>

как я могу предотвратить нажатие кнопки?

1 Ответ

0 голосов
/ 17 июня 2020

Применение display:flex; или display:inline-flex; (в зависимости от вашей цели) к родительскому <div> решит вашу проблему. Однако я настоятельно рекомендую вам реструктурировать макет и рассмотреть возможность использования для него медиа-запросов . В случае экранов небольшого размера вы можете иметь width:100%; для вашего родителя <div>, а для экранов большего размера width:30%;, как у вас сейчас. Медиа-запросы - лучший способ сделать ваш сайт адаптивным, чем просто полагаться на CSS процент.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...