Как Input сделать до конца блока,и чтобы при адаптиве он уменьшался

29.03.2021, 18:22. Показов 1298. Ответов 0

Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам

Как Input сделать до конца блока,и чтобы при адаптиве он уменьшался

Получается слева у меня лого,справа через несколько пикселей на всю страницу нужен input
Все из-за блока shadow
width:100%;

как его можно лучше сделать,если ширину width:100%; убрать из родительского блока,то блок заполнится не на всю страницу

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="shadow">
            <div class="shadow_wrapper">
              <div class="left_block_shadow">
                    <a href="#" class="header_logo-link">
                      <img src="./img/logo2.svg" alt="" class="logo2">
                    </a>
              </div>
            <div class="right_block_shadow"> 
                    <div class="wrapper_inpt">
                        <input class="header_input" type="search" name="q" placeholder="Что вы ищите?">
                        <div class="btn_area">
                            <div class="r1"><button class="button_search" type="submit">Искать</button></div>
                            <a href="#" id="btn2" class="close">
                              <img src="./img/close-button.svg" class="close-button">
                            </a>
                        </div>
                    </div> 
 
                <hr>
            </div>
            </div>
          </div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.shadow {
    width:100%;
    height:100%;
    background: #FFF;
    position:absolute;
    top:0;
    right:-120%;
    transition-property:right;
    transition-duration: 0.5s;
    z-index: 3; 
}
input.header_input{
    width: 30%;
    height: 20px;
    border: 0;
}

cpp_developer

Эксперт

20123 / 5690 / 1417

Регистрация: 09.04.2010

Сообщений: 22,546

Блог

29.03.2021, 18:22

Ответы с готовыми решениями:

Как сделать, чтобы при уменьшении окна уменьшался размер блоков
Здравствуйте. На сайте есть несколько div, которые расположены по три в ряд. Как сделать, чтобы при уменьшении окна одновременно...

Как сделать, чтобы при наведении на блок уменьшался box-shadow фона?
Здравствуйте , суть в том что когда делал эффекты при наведение на блок , представьте такой квадратик , он менял цвет , ну это стандарт и...

Как сделать отметку начала и конца блока, удаление, перемещение блока строк
Здравствуйте. Есть минимальный код для работы со строками.Далее не знаю как сделать Отметку начала и конца блока, удаление, перемещение...

Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.

raxper

Эксперт

30234 / 6612 / 1498

Регистрация: 28.12.2010

Сообщений: 21,154

Блог

29.03.2021, 18:22

Помогаю со студенческими работами здесь

Как сделать так, чтобы при прокрутке фото уходило не до конца?
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> $(function(){ ...

растягивание input до конца блока
Всем привет. У меня есть форма, внутри формы подобного рода строчки: <span>текст</span> <input type="text"...

Как сделать, чтобы при компиляции в ехе после конца операции не закрывался ехешник
Всех приветствую! У меня небольшая проблема. У меня есть код по вычислению степеня из любого числа в Паскаль АБС function Pow1(a,n:real):...

Как сделать чтобы при нажатии кнопка <input> открывалась в новой вкладке?
Здравствуйте! Как сделать чтобы при нажатии кнопка <input> открывалась в новой вкладке? Наткнулся на статью, где решение было вот это:...

Как сделать, чтобы при скроллинге страницы менялась прозрачность фона блока?
Наверху страницы фиксированное меню, где названия разделов сайта: <div id="header-top2" align="center"> <nav...

Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

Наверх