Блог

Главная - Вопросы по программированию - Есть ли способ сделать так, чтобы поле ввода имело отзывчивую ширину, даже если оно является дочерним элементом flex?

Есть ли способ сделать так, чтобы поле ввода имело отзывчивую ширину, даже если оно является дочерним элементом flex?

#html #css #flexbox

Вопрос:

Я совсем новичок в использовании гибких ящиков и сеток, и я не могу в этом разобраться, я пытаюсь создать навигационную панель с адаптивной панелью поиска по ширине. (Похоже на переполнение стека на панели навигации), но по какой-то причине, когда я пытаюсь использовать width: 100% панель поиска, ее ширина не меняется. Я пробовал просматривать бесчисленные учебные пособия и сообщения, но, похоже, ничего не работает. Любая помощь была бы потрясающей

Отрывок:

 @import url('https://fonts.googleapis.com/css2?family=Ubuntu Monoamp;display=swap');
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-family: 'Ubuntu Mono', sans-serif;
  color: #333;
  line-height: 1.6;
}

ul {
  list-style-type: none;
}

a {
  text-decoration: none;
  color: #333;
}

h1,
h2 {
  font-weight: 300;
  line-height: 1.2;
  margin: 10px 0;
}

p {
  margin: 10px 0;
}

img {
  width: 100%;
}

.navbar {
  background-color: #F4F4F5;
  height: 70px;
}

.navbar ul {
  display: flex;
}

.navbar a {
  padding: 10px;
  margin: 0 5px;
}

.navbar a:hover {
  border-bottom: 2px #333 solid;
}

.navbar .flex {
  justify-content: space-between;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  overflow: auto;
  padding: 0 20px;
}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

#searchbar {
  width: 100%;
} 
 <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />
  <link rel="stylesheet" href="assets/css/style.css">
  <title>Website</title>
</head>

<body>
  <div class="navbar">
    <div class="container flex">
      <h2 class="logo">Website</h2>
      <nav>
        <ul>
          <form>
            <input id="searchbar" type="text" placeholder="Search.."></li>
          </form>
          <li><a href="#">About</a></li>
          <li><a href="#">Login</a></li>
          <button class="navbar-btn">Click me!</button>
        </ul>
      </nav>
    </div>
  </div>
</body>

</html>

Ответ №1:

Попробуйте это

 .container nav {
  flex: 1;
}

.container form {
  width: 100%;
}

Ответ №2:

Если вы подниметесь вверх по родительским элементам строки поиска, вы увидите, что этот <nav> элемент является частью flex. Таким образом, чтобы ваша строка поиска занимала 100% ширины, вам нужно будет предоставить всем его родителям ( <ul> amp; <form> ) ширину 100%.

Так что что-то вроде этого:

 nav {
  width: 100%;
}
ul {
  width: 100%;
}
form {
 width: 100%;
}
#searchbar {
  width: 100%;
}

Чтобы найти эти типы решений, я бы занялся этим с помощью любого инспектора браузера, такого как google chromes (рекомендую попасть туда, щелкнув правой кнопкой мыши сам элемент, а не «Проверить»), поэтому инспектор перейдет непосредственно к элементу, поднимется вверх и вниз по иерархии и проверит стиль на лету.

Пример: введите описание изображения здесь

Это не единственное решение. Но я чувствую, что это поможет вам понять, как найти решение в подобных ситуациях.

Метки: , ,