为什么输入不在标题中？答案

【问题标题】：How come input is not in header?为什么输入不在标题中？
【发布时间】：2021-02-11 22:44:57
【问题描述】：

我创建了一个最小可行产品，我不确定为什么我的文本输入不在标题徽标内，因为我的文本输入已经在标题 div 内。有人可以帮我吗？如您所见，输入位于 div 下方，我希望它位于亚马逊徽标旁边。

这里是沙盒的链接：

https://codesandbox.io/s/shy-cdn-yfoh0?file=/src/Header.js

Header.js

export default function Header() {
  return (
    <div className='header'>

      <img className='header__logo'
       src='http://pngimg.com/uploads/amazon/amazon_PNG11.png'
      />

      <div className='header__search' >
        <input 
        className='heade__search'
        type='text'
        />
      </div>

    
    </div>
  )
}

Header.css

.header {
  height: 60px;
  border: 1px solid red;
  display: "flex";
  align-items: center;
  background-color: #131921;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header__logo {
  width: 100px;
  /* Keep aspect ratio */
  object-fit: contain;
  margin: 0 20px;
  margin-top: 18px;
}

谢谢！

【问题讨论】：

应该是 display: flex，而不是 "flex"

标签： reactjs

【解决方案1】：

应该是 display: flex，而不是 display: "flex"。去掉引号。

字体：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container

【讨论】：