0

Не могу подогнать кнопку в нужное место при определенном разрешении монитора, имеется такой код формы поиска, HTML:

<div class="search-box">
                    <form id="quicksearch" method="post">
                        <input type="hidden" name="do" value="search" />
                        <input type="hidden" name="subaction" value="search" />
                        <div class="search-field">
                            <input id="story" name="story" placeholder="Поиск..." type="text" />
<button type="submit" class="btn-login" style="border:0px; padding: 0px; top: 0px; left: 230px;"><span class="fa fa-search"></span></button> 
                        </div>
                    </form>
                               </div>введите сюда код

CSS:

.search-box {width:280px;}
.search-field {width:100%; position:relative;}
.search-field input, .search-field input:focus {width:100%; padding:0 100px 0 10px; border-radius:23px; 
background-color:#fff; color:#333; height:40px; line-height:40px; box-shadow:inset 0 0 0 1px #e3e3e3;}
.search-box button {position: absolute;}

получается все хорошо, как на картинке ниже: введите сюда описание изображения

а когда пытаюсь уменьшить по размерам поле для мобильных, вот так:

@media screen and (max-width: 470px) {
.search-box {width:180px;}
}

то поле ввода уменьшается, а кнопка остается на месте и выходит за пределы видимости экрана:

введите сюда описание изображения

я пытался добавить в @media

1) .search-box button{top: 0px;left: 130px;}
2) .search-box btn-login{top:0px;left: 130px;}
3) .btn-login search-box {top: 0px;left: 130px;}
4) .button search-box {top: 0px;left: 130px;}

ничего не получилось, кнопка не сдвигилась с места и оставалась за зоной видимости, подскажите, что нужно прописать в медиа запрос чтоб кнопка переместилась на нужную позицию?

4
  • пишите не left:130px; а left:100%;
    – user33274
    4 июн 2018 в 14:20
  • Максим Ленский, к сожалению не помогло, кнопка никак не реагирует
    – Zin Me
    4 июн 2018 в 14:43
  • ну конечно не помогло ... padding у вас с права 100px ... и потому ваш блок не 100%
    – user33274
    4 июн 2018 в 14:46
  • Звездочка (*) - универсальный селектор для CSS. Соответствует любому тегу.
    – master114
    4 июн 2018 в 19:07

1 ответ 1

0

Вот так вроде бы ...если что то не ясно спрашивайте

*{ margin:0;padding:0;box-sizing:border-box;}
.search-box {min-width:230px;max-width:300px; margin:auto; border:2px solid #ccc;border-radius:23px;}
.search-field {width:100%; position:relative;border-radius:23px;}
.search-field input, .search-field {width:100%; border-radius:23px;color:#333; height:40px; line-height:40px;border:none; padding-left:4px;}
.search-box button {position: absolute;top:0;right:0;width:40px;height:40px;border-radius:50%;border:none;outline:none;}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="search-box">
  <form id="quicksearch">
    <input type="hidden" name="do" value="search">
    <input type="hidden" name="subaction" value="search">
    <div class="search-field">
      <input id="story" name="story" placeholder="Поиск..." type="search">
      <button type="submit" class="btn-login"><span class="fa fa-search"></span></button> 
    </div>
  </form>
</div

1
  • Спасибо так сработало, только мне не понятна Ваша строка кода которая начинается со звездочки(*{ margin:0;padding:0;box-sizing:border-box;}) я не вставлял в мои стили эту строку, так как не понял ее назначение и почему она начинается со звездочки (без нее все работает), и еще вопрос, можно ли border (я поставил у себя толщину 1 px) сделать так, чтоб он якобы сливаляся с кнопкой(входил в нее по краю) а не огибал? еще раз спасибо..
    – Zin Me
    4 июн 2018 в 16:09

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.