The button on the page has moved

Question

Good day to all. The search button has moved, a screenshot is attached.

The button must be at the search line level. In the layout is not strong. The code of the block itself is presented below:

@import 'https://fonts.googleapis.com/css? family=Open+Sans:400,600,700&subset=cyrillic' body{ font-size: 15px; font-family: 'Open Sans', sans-serif; } .top{ padding: 20px 0; font-size: 25px; font-weight: 600; text-transform: uppercase; } .top-bl{ background: #bebebe; padding: 15px; } .top-bl .cart{ float: right; } #sidebar ul{ list-style: none; margin: 0; padding: 0; margin-top: 20px; } #sidebar ul li{ padding: 5px 10px; } #sidebar ul li.selected{ background: #0095ff; color: white; border-radius: 3px; } #sidebar ul li.selected a{ color: white; } .items{ margin-top: 20px; } .item{ text-align: center; margin-bottom: 30px; } .item a img{ margin-bottom: 15px; } .product-detail{ margin-top: 40px; } .price{ font-weight: 600; font-size: 20px; } .product-detail h2{ font-size: 18px; } form.add{ margin-bottom: 10px; } form.add label{ margin-right: 10px; } #id_quantity{ padding: 5px 10px; border-radius: 3px; } form.add input[type="submit"]{ background: #2a6496; border-radius: 3px; border: 0; padding: 5px 10px; color: white; } .table-cart{ width: 100%; margin: 10px 0; } .cart-img{ width: 10%; } th, td{ padding: 5px; } thead{ background: #2a6496; color: white; } .btn{ background: #2a6496; color: white; } .btn-light{ background: #808080; } .order-info h2{ margin-bottom: 20px; } .order-form{ margin-top: 20px; margin-bottom: 20px; } .order-form label{ display: block; } .order-form input{ width: 100%; padding: 5px 10px; }

 {% load static %} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>{% block title %}{% endblock %}</title> <!-- Styles --> <link rel="stylesheet" href="{% static "css/bootstrap.min.css" %}"> <link rel="stylesheet" href="{% static "css/style.css" %}"> </head> <body> <section id="header"> <div class="top container"> Онлайн магазин "Гитарист" </div> <div class="top-bl"> <div class="container"> <div class="row"> <div class="col-md-6"> <a class="btn btn-large" href="/">Главная</a> <a class="btn btn-large" href="/">Доставка</a> <a class="btn btn-large" href="/">О нас</a> </div> <div class="col-md-6"> <div class="row"> <div class="col-md-6"> <form method="GET" action="{% url 'shop:ProductSearch' %}" class="pull-down navbar-search"> <input style="width: auto; display: inline-block" class="form-control" name="search_query" type="text" placeholder="Поиск..." > <button type="submit" class="btn btn-large" type="button">Поиск</button> </form> </div> <div class="col-md-6"> <div class="cart"> {% with total_items=cart|length %} {% if cart|length > 0 %} Ваша корзина: <a href="{% url "cart:CartDetail" %}"> {{ total_items }} тов. {{ cart.get_total_price }} грн. </a> {% else %} Корзина пустая {% endif %} {% endwith %} </div> </div> </div> </div> </div> </div> </div> </section> <section id="content row" class="container"> {% block content %}{% endblock %} </section> </body> </html>

You need the code pull-down , navbar-search , form-control , btn and btn-large .
According to the information that you provided, it is impossible to say.
@Egor, added css file and full base HTML from which everything is inherited.

Answer 1 · 2017-05-14T23:34:10

You provided the wrong css file. There are no styles that are specified in the form and elements. If you click on the Выполнить код button below, you will see that the elements are located in one line, but their style is different from the picture that you attached to the question. This is because in the style file that you dropped there is no pull-down , navbar-search , form-control and btn-large . There is only on btn .

  @import 'https://fonts.googleapis.com/css? family=Open+Sans:400,600,700&subset=cyrillic' body{ font-size: 15px; font-family: 'Open Sans', sans-serif; } .top{ padding: 20px 0; font-size: 25px; font-weight: 600; text-transform: uppercase; } .top-bl{ background: #bebebe; padding: 15px; } .top-bl .cart{ float: right; } #sidebar ul{ list-style: none; margin: 0; padding: 0; margin-top: 20px; } #sidebar ul li{ padding: 5px 10px; } #sidebar ul li.selected{ background: #0095ff; color: white; border-radius: 3px; } #sidebar ul li.selected a{ color: white; } .items{ margin-top: 20px; } .item{ text-align: center; margin-bottom: 30px; } .item a img{ margin-bottom: 15px; } .product-detail{ margin-top: 40px; } .price{ font-weight: 600; font-size: 20px; } .product-detail h2{ font-size: 18px; } form.add{ margin-bottom: 10px; } form.add label{ margin-right: 10px; } #id_quantity{ padding: 5px 10px; border-radius: 3px; } form.add input[type="submit"]{ background: #2a6496; border-radius: 3px; border: 0; padding: 5px 10px; color: white; } .table-cart{ width: 100%; margin: 10px 0; } .cart-img{ width: 10%; } th, td{ padding: 5px; } thead{ background: #2a6496; color: white; } .btn{ background: #2a6496; color: white; } .btn-light{ background: #808080; } .order-info h2{ margin-bottom: 20px; } .order-form{ margin-top: 20px; margin-bottom: 20px; } .order-form label{ display: block; } .order-form input{ width: 100%; padding: 5px 10px; }

  <form method="GET" action="{% url 'shop:ProductSearch' %}" class="pull-down navbar-search"> <input style="width: auto; display: inline-block" class="form-control" name="search_query" type="text" placeholder="Поиск..." > <button type="submit" class="btn btn-large" type="button">Поиск</button> </form>

I have already looked through this style file for a long time.
It does not have pull-down , navbar-search , form-control and btn-large .
You have the opportunity to upload the project to the hosting (any), so that you can see the site in the form in which you see it?
I did not mean the source, but a running site, where the button crawled down.

The button on the page has moved

1 answer 1

More articles: