Мобильная версияЯ использую Angular Material mat-autocomplete, чтобы перечислить все поисковые предложения в раскрывающемся меню. Под каждой опцией mat есть два элемента div, первое выделенное значение div должно быть выровнено по левому краю, а номер второго div-информации должен быть слева, например:
И я попробовал:
поиск закрыть НР. {{ предложение._source.Nr }} Zeige alle {{ allSearchSuggestionsFromEndpoint1.length }} Треффер .search-box-container { граница: 2 пикселя, сплошная #ccc; радиус границы: 25 пикселей; переполнение: скрыто; высота: 48 пикселей; ширина: 632 пикселей; цвет фона: # F2F2F2; // позиция: абсолютная; положение: относительное; верх: 17 пикселей; /* При необходимости отрегулируйте верхнее положение */ внизу: 17 пикселей; /* При необходимости отрегулируйте нижнее положение */ слева: 391 пикселей; /* При необходимости отрегулируйте левое положение */ справа: 389 пикселей; /* Отрегулируйте правильное положение по мере необходимости */ // цвет фона:#F2F2F2; дисплей: гибкий; /* Используйте flexbox для расположения кнопок */ выровнять-элементы: по центру; /* Вертикально центрируем кнопки */ оправдание-содержание: центр; /* Горизонтально центрируем кнопки и ввод */ ввод:: заполнитель { цвет: #343F4D; /* Изменяем цвет на оттенки серого/городской серый (#343F4D) */ размер шрифта: 14 пикселей; /* Изменяем размер шрифта */ семейство шрифтов: «Skolar Sans PE Regular», без засечек; /* Измените семейство шрифтов на Skolar Sans PE Regular */ } .кнопка поиска { высота: 16 пикселей; ширина: 16 пикселей; поле справа: 8 пикселей; маржа: 0; заполнение: 0; граница: нет; цвет фона: прозрачный; курсор: указатель; // Размещаем кнопку поиска позиция: абсолютная; верхние: 42%; внизу: авто; /* Удаляем нижнее свойство */ слева: 18 пикселей; справа: авто; трансформировать: транслироватьY(-50%); } .кнопка сброса { высота: 16 пикселей; ширина: 16 пикселей; маржа: 0; заполнение: 0; граница: нет; цвет фона: прозрачный; курсор: указатель; // Размещаем кнопку сброса позиция: абсолютная; верхние: 42%; внизу: авто; /* Удаляем нижнее свойство */ слева: авто; справа: 24 пикселя; трансформировать: транслироватьY(-50%); } } .dropdown-панель{ радиус границы: 8 пикселей; цвет фона: #FFFFFF; box-shadow: 0 0 1px 0 rgba(48,49,51,0.05), 0 8px 16px 0 rgba(48,49,51,0.1); переполнение-х: скрыто; /* Отключить горизонтальную полосу прокрутки */ маржа сверху: 17 пикселей; поле внизу: 17 пикселей; /* Добавьте нижний край размером 17 пикселей, чтобы создать расстояние */ /* Регулируем положение панели автозаполнения */ // позиция: абсолютная; // слева: 388 пикселей !важно; // справа: 388 пикселей !важно; // верх: 71 пиксель !important; // низ: 71 пиксель !important; } ::ng-deep .mat-autocomplete-panel { положение: относительное; маржа сверху: 17 пикселей; } мат-значок { цвет: #343F4D !важно; /* Устанавливаем цвет aareon Urban Grey */ } поле мат-формы { ширина: 88%; input.mat-input-element { выравнивание текста: по центру; } } ::ng-deep .mat-mdc-form-field-subscript-wrapper { дисплей: нет; } мат-опция { дисплей: гибкий; выровнять-элементы: по центру; максимальная ширина: 600 пикселей; /* Измените значение по мере необходимости */ цвет фона: #FFFFFF; поле сверху: 1 пиксель; /* Отрегулируйте это значение, чтобы увеличить или уменьшить расстояние между опциями */ поле слева: 16 пикселей; поле справа: 16 пикселей; нижняя граница: 1 пиксель сплошной #ccc; } .предложение-контейнер { дисплей: гибкий; оправдание-содержание: пространство между; /* Выравниваем дочерние элементы с каждого конца */ ширина: 100%; } .highlighted-значение { переполнение: скрыто; пробел: nowrap; переполнение текста: многоточие; цвет: #343F4D; семейство шрифтов: «Skolar Sans PE», без засечек; размер шрифта: 14 пикселей; межбуквенный интервал: 0; высота строки: 16 пикселей; выравнивание текста: по левому краю; } .nr-информация { цвет: #848B93; семейство шрифтов: «Skolar Sans PE», без засечек; размер шрифта: 12 пикселей; начертание шрифта: жирный; Расстояние между буквами: 1,71 пикселей; высота строки: 13 пикселей; выравнивание текста: по правому краю; гибкое сжатие: 0; /* Предотвращаем сжатие nr-info */ поле слева: авто; /* Нажмите nr-info вправо */ } /* Добавляем стили для центрирования содержимого кнопки «Просмотреть все» */ .view-all-container { положение: липкое; верх: 100%; /* Размещаем кнопку внизу контейнера */ z-индекс: 1; /* Убедитесь, что он находится поверх другого контента */ цвет фона: #FFFFFF; /* Соответствие цвету фона */ отступ: 10 пикселей; /* Добавляем отступы для пробелов */ /* Дополнительные стили */ border-top: 1px сплошной #ccc; дисплей: гибкий; оправдание-содержание: центр; /* Центрировать по горизонтали */ выровнять-элементы: по центру; /* Центрировать по вертикали */ ширина: 100%; поле сверху: 13 пикселей; /* Добавляем поле для интервала */ } /* Центрируем текст внутри кнопки */ .view-all-button { выравнивание текста: по центру; дисплей: гибкий; выровнять-элементы: по центру; оправдание-содержание: центр; /* Центрируем содержимое по горизонтали */ ширина: 35%; /* Устанавливаем ширину кнопки, соответствующую окну поиска */ высота: 18 пикселей; переполнение: скрыто; курсор: указатель; переход: фон .3с; отступ: 0 16 пикселей; цвет: #0237FF; семейство шрифтов: «Skolar Sans PE Bold», без засечек; размер шрифта: 14 пикселей; вес шрифта: 600; межбуквенный интервал: 0; высота строки: 16 пикселей; поле сверху: 13 пикселей; поле внизу: 13 пикселей; граница: нет; цвет фона: прозрачный; } Однако сейчас это выглядит:
Любая своевременная помощь будет высоко оценена!
