Мобильная версияУ меня есть панель поиска в заголовке, точнее, поле ввода «текст для поиска» в средней части моего компонента заголовка. Я хочу установить обычную ширину на 600 пикселей, а затем, когда экран становится меньше, поле ввода также уменьшается, пока не достигнет минимальной ширины 100 пикселей, и наоборот, чтобы оно естественным образом увеличивалось, пока снова не достигнет 600 пикселей. Но по какой-то причине, несмотря на все, что я пробовал, ничего не работает, полоса остается на уровне 600 пикселей без естественного сжатия. Я буквально просто пытаюсь скопировать гибкие возможности увеличения и уменьшения панели поиска YouTube в разделе заголовка веб-сайта. Честно говоря, я бы также просто использовал панель поиска, которая естественным образом сжимается и увеличивается в качестве решения этой проблемы.
импортировать React из 'реагировать' импортировать './Header.scss' импортировать логотип из «./assets/youtube-logo.svg» импортировать меню из «./assets/hamburger-menu.svg» импортировать стекло из './assets/search.svg' импортировать микрофон из './assets/voice-search-icon.svg' импортировать загрузку из './assets/upload.svg' импортировать колокол из «./assets/notifications.svg» импортировать пин-код из './assets/nob.jpeg' const Header = ({toggler}) => { возвращаться (
Поиск
Голосовой поиск
Создать
3 Уведомления
) } экспортировать заголовок по умолчанию .header { дисплей: гибкий; оправдание-содержание: пространство между; заполнение: 0,5рем 0рем 0,5рем 0,5рем; выровнять-элементы: по центру; ширина: 100vw; разрыв: 70 пикселей; положение: фиксированное; верх: 0; z-индекс: 12; .левый-раздел { дисплей: гибкий; выровнять-элементы: по центру; гибкое сжатие: 0; .меню { отступ: 8 пикселей 8 пикселей; радиус границы: 50%; граница: нет; дисплей: гибкий; цвет фона: белый; поле справа: 12 пикселей; курсор: указатель; .меню-значок { высота: 25 пикселей; ширина: 25 пикселей; } &:наведите { цвет фона: RGB(230, 230, 230); } } а { .you-логотип { высота: 25 пикселей; } } } .средняя часть { дисплей: гибкий; гибкое направление: строка; оправдание-содержание: центр; выровнять-элементы: по центру; .поиск-форма{ дисплей: гибкий; гибкое направление: строка; .панель поиска { дисплей: гибкий; .search-текст { гибкий рост: 1; гибкая термоусадка: 1; ширина: 600 пикселей; минимальная ширина: 150 пикселей; граница-нижний-левый радиус: 50 пикселей; радиус верхнего левого края: 50 пикселей; box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); граница: сплошная 1 пиксель; цвет границы: RGB(207, 207, 207); заполнение: 0,5 рем 1 рем; размер шрифта: большой; контур: нет; z-индекс: 5; &:фокус { поле-тень: 0 0 0 0,3 пикселей RGB (0, 47, 255); } } .search-но { отступ: 2 пикселя 4 пикселя; граница-верхний-правый-радиус: 50 пикселей; граница-нижний-правый-радиус: 50 пикселей; граница: сплошная 1 пиксель; цвет границы: RGB(207, 207, 207); левая граница: нет; дисплей: гибкий; выровнять-элементы: по центру; оправдание-содержание: центр; ширина: 50 пикселей; z-индекс: 4; курсор: указатель; положение: относительное; &:наведите { цвет фона: RGB (230, 230, 230); } &:hover .tooltip { семейство шрифтов: без засечек; позиция: абсолютная; цвет фона: серый; белый цвет; отступ: 10 пикселей 6 пикселей; радиус границы: 2 пикселя; размер шрифта: 12 пикселей; переход: непрозрачность 0,15 с; события указателя: нет; пробел: nowrap; дисплей: блок; внизу: -50 пикселей; непрозрачность: 0,8; } .search-icon { высота: 25 пикселей; ширина: 25 пикселей; } .tooltip { дисплей: нет; } } } .voice-но { отступ: 8 пикселей 8 пикселей; радиус границы: 50%; граница: нет; дисплей: гибкий; поле слева: 15 пикселей; положение: относительное; курсор: указатель; переход: фоновый цвет 0,3 с; &:наведите { цвет фона: RGB (200, 200, 200); } &:hover .tooltip { семейство шрифтов: без засечек; позиция: абсолютная; цвет фона: серый; белый цвет; отступ: 10 пикселей 6 пикселей; радиус границы: 2 пикселя; размер шрифта: 12 пикселей; переход: непрозрачность 0,15 с; события указателя: нет; пробел: nowrap; дисплей: блок; внизу: -50 пикселей; справа: -40 пикселей; z-индекс: 7; непрозрачность: 0,8; } .голос { высота: 25 пикселей; ширина: 25 пикселей; } .tooltip { дисплей: нет; } } } } .right-раздел { дисплей: гибкий; оправдание-содержание: пространство между; ширина: 150 пикселей; поле справа: 30 пикселей; .upload-контейнер { отступ: 8 пикселей 8 пикселей; радиус границы: 50%; граница: нет; дисплей: гибкий; цвет фона: белый; курсор: указатель; положение: относительное; переход: фоновый цвет 0,3 с; &:наведите { цвет фона: RGB (230, 230, 230); } &:hover .tooltip { семейство шрифтов: без засечек; позиция: абсолютная; цвет фона: серый; белый цвет; отступ: 10 пикселей 6 пикселей; радиус границы: 2 пикселя; размер шрифта: 12 пикселей; переход: непрозрачность 0,15 с; события указателя: нет; пробел: nowrap; дисплей: блок; внизу: -50 пикселей; справа: -5 пикселей; z-индекс: 7; непрозрачность: 0,8; } .загрузить { высота: 25 пикселей; ширина: 25 пикселей; } .tooltip { дисплей: нет; } } .поставить в известность { отступ: 8 пикселей 8 пикселей; радиус границы: 50%; граница: нет; дисплей: гибкий; цвет фона: белый; положение: относительное; курсор: указатель; переход: фоновый цвет 0,3 с; &:наведите { цвет фона: RGB (230, 230, 230); } &:hover .tooltip { семейство шрифтов: без засечек; позиция: абсолютная; цвет фона: серый; белый цвет; отступ: 10 пикселей 6 пикселей; радиус границы: 2 пикселя; размер шрифта: 12 пикселей; переход: непрозрачность 0,15 с; события указателя: нет; пробел: nowrap; дисплей: блок; внизу: -50 пикселей; слева: -15 пикселей; z-индекс: 7; непрозрачность: 0,8; } .notify-значок { высота: 25 пикселей; высота: 25 пикселей; } .notify-count { цвет фона: красный; белый цвет; отступы: 5 пикселей 8 пикселей; радиус границы: 50%; позиция: абсолютная; размер шрифта: 12 пикселей; верх: -2px; справа: -1 пиксель; } .tooltip { дисплей: нет; } } .пин-девушка { высота: 40 пикселей; ширина: 40 пикселей; радиус границы: 50%; поле слева: 10 пикселей; курсор: указатель; } } } Я попробовал использовать максимальную ширину для элемента div 'search-bar' и установить для элемента div 'search-text' значение width: auto; сохраняя при этом гибкость сжиматься и расти на нем. Я попробовал использовать чатGBT. Я попытался изменить порядок свойств. Ничего не помогло.
