Я создал минимально жизнеспособный продукт, я не уверен, почему мой ввод текста не находится внутри логотипа заголовка, поскольку мой ввод текста уже находится внутри заголовка div. Может ли кто-нибудь помочь мне? Как видите, ввод находится под div, я хочу, чтобы он был рядом с логотипом Amazon.

Вот ссылка на песочницу:

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;
}

Благодарность!

0
Tom Hunt 12 Фев 2021 в 01:44

1 ответ

Лучший ответ

Должен быть display: flex, а не display: "flex". Удалите кавычки.

Шрифт: https://developer.mozilla.org/en- США / docs / Web / CSS / CSS_F flexible_Box_Layout / Aligning_Items_in_a_Flex_Container

0
LuisMendes535 11 Фев 2021 в 22:49