Мобильная версияНовичок в React, у меня есть следующий Header.js:
импортировать React из 'реагировать'; импортировать {ссылку} из 'реагировать-маршрутизатор-дом'; импортировать './styles/styles.css'; импортировать { FontAwesomeIcon } из '@fortawesome/react-fontawesome'; импортировать { faCoffee, faSearch, faBars } из '@fortawesome/free-solid-svg-icons'; функция Заголовок() { возвращаться ( {/* Левая часть */} Некоторый пользователь ); } экспортировать заголовок по умолчанию; И следующий styles.css:
@import 'tailwindcss/base'; @import 'tailwindcss/компоненты'; @import 'tailwindcss/utilities'; .header { цвет фона: #6858ca; цвет: #fff; отступ: 10 пикселей 20 пикселей; дисплей: гибкий; оправдание-содержание: пространство между; выровнять-элементы: по центру; } .кофе { цвет: #9a8edf; размер шрифта: 24 пикселей; } .панель поиска { дисплей: гибкий; выровнять-элементы: по центру; цвет фона: #52459c; радиус границы: 5 пикселей; отступ: 5 пикселей; поле слева: 10 пикселей; } .search-icon { цвет: #fff; } .search-input { граница: нет; фон: нет; цвет: #fff; контур: нет; отступ: 5 пикселей; поле слева: 5 пикселей; } .header-right { дисплей: гибкий; выровнять-элементы: по центру; } .меню-значок { цвет: #9a8edf; размер шрифта: 24 пикселей; поле справа: 10 пикселей; } .имя пользователя { цвет: #fff; начертание шрифта: жирный; } Я пытаюсь сделать так, чтобы значок кофе появился в левой части заголовка, а затем, через некоторое время, добавить панель поиска. Вместо этого я получаю панель поиска, появляющуюся ниже на 1 строку и слегка сдвинутую вправо:
Как это исправить и сделать так, чтобы панель поиска появлялась справа от значка кофе?
