为什么 <input type="text" 和 flex 不能很好地协同工作？

Question

我不明白为什么我在 css 中添加 display:flex 时搜索框变大了。谁能告诉我为什么搜索框变大以及如何将其固定到正常高度？我希望搜索栏和搜索图标也粘在一起。感谢您的帮助！

* {
  font-family: "poppins";
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}

header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

<!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="css/style2.css" />
    <link
      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css"
      integrity="sha384-ejwKkLla8gPP8t2u0eQyL0Q/4ItcnyveF505U0NIobD/SMsNyXrLti6CWaD0L52l"
      crossorigin="anonymous"
    />
    <title>Document</title>
  </head>
  <body>
    <header>
      <a href="#">My Logo</a>
      <ul class="navigation">
        <a href="#"><li>Home</li></a>
        <a href="#"><li>TV Shows</li></a>
        <a href="#"><li>Movies</li></a>
        <a href="#"><li>Latest</li></a>
        <a href="#"><li>My List</li></a>
      </ul>
      <input type="text" placeholder="Search" />
      <i class="bi bi-search"></i>
    </header>
  </body>
</html>

Answer 1

* {
  font-family: "poppins";
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}

header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

header .navigation {
  display: flex;
}

header .navigation li {
  margin: 0 .3rem;
}

<!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="css/style2.css" />
    <link
      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css"
      integrity="sha384-ejwKkLla8gPP8t2u0eQyL0Q/4ItcnyveF505U0NIobD/SMsNyXrLti6CWaD0L52l"
      crossorigin="anonymous"
    />
    <title>Document</title>
  </head>
  <body>
    <header>
      <a href="#">My Logo</a>
      <ul class="navigation">
        <a href="#"><li>Home</li></a>
        <a href="#"><li>TV Shows</li></a>
        <a href="#"><li>Movies</li></a>
        <a href="#"><li>Latest</li></a>
        <a href="#"><li>My List</li></a>
      </ul>
      <input type="text" placeholder="Search" />
      <i class="bi bi-search"></i>
    </header>
  </body>
</html>

Answer 2

您可以指定align-items

也许您想要 flex-start 而不是默认的 stretch。

align-items - CSS: Cascading Style Sheets | MDN

Answer 3

由于 cross-axis 的默认 strech 值，输入占据了 flexbox 的整个高度。为防止这种情况，您需要为输入指定一个特定的高度，例如 min-content。或者，您可以通过将 align-items: flex-start 添加到 flex-container.

来防止这种情况

使用其他默认值 align-items: strech;:

* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}

header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

<header>
  <a href="#">My Logo</a>
  <ul class="navigation">
    <a href="#">
      <li>Home</li>
    </a>
    <a href="#">
      <li>TV Shows</li>
    </a>
    <a href="#">
      <li>Movies</li>
    </a>
    <a href="#">
      <li>Latest</li>
    </a>
    <a href="#">
      <li>My List</li>
    </a>
  </ul>
  <input type="text" placeholder="Search" />
  <i class="bi bi-search"></i>
</header>

给输入一个特定的高度：

* {
  font-family: "poppins";
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}

header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

input {
  height: min-content;
}

<header>
  <a href="#">My Logo</a>
  <ul class="navigation">
    <a href="#">
      <li>Home</li>
    </a>
    <a href="#">
      <li>TV Shows</li>
    </a>
    <a href="#">
      <li>Movies</li>
    </a>
    <a href="#">
      <li>Latest</li>
    </a>
    <a href="#">
      <li>My List</li>
    </a>
  </ul>
  <input type="text" placeholder="Search" />
  <i class="bi bi-search"></i>
</header>

Answer 4

您可以将 input 和 i 标签包装在 div:

* {
  font-family: "poppins";
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}

header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

<!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="css/style2.css" />
    <link
      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css"
      integrity="sha384-ejwKkLla8gPP8t2u0eQyL0Q/4ItcnyveF505U0NIobD/SMsNyXrLti6CWaD0L52l"
      crossorigin="anonymous"
    />
    <title>Document</title>
  </head>
  <body>
    <header>
      <a href="#">My Logo</a>
      <ul class="navigation">
        <a href="#"><li>Home</li></a>
        <a href="#"><li>TV Shows</li></a>
        <a href="#"><li>Movies</li></a>
        <a href="#"><li>Latest</li></a>
        <a href="#"><li>My List</li></a>
      </ul>
      <div>
      <input type="text" placeholder="Search" />
      <i class="bi bi-search"></i>
      </div>
    </header>
  </body>
</html>

Answer 5

这是因为默认情况下 flex align-items 属性设置为拉伸以避免此问题，您可以在输入字段上设置高度或者更改 align-items 属性值到 flex-start.

检查https://www.w3schools.com/cssref/css3_pr_align-items.asp

Answer 6

发生这种情况是因为，您的导航 class 具有更高的高度，并且默认情况下，输入元素的高度是容器的高度。

一起编译所有内容：我想出了 3 种解决方案。

要么你写 height 输入：min-content;
make .navigation 到 display flex ，这会降低该组件的高度。
添加 align-items : flex-start 或 center ;到 header 元素，降低输入元素的高度 .

input{
   height: min-content;
}

.navigation{
   display:flex;
}

header{
   ...other styles of this element 
   align-items:flex-start;
}

您可以使用以上任何一种方式来解决您的问题。

为什么 <input type="text" 和 flex 不能很好地协同工作？

Why is <input type="text" and flex not working well together?

html

css

flexbox