Текст посреди 2-х кнопок

212

02 апреля 2019, 08:10

Всех приветствую. Пытаюсь сделать текст посреди 2-х кнопок, типа такого:

А получается так:

Кнопки влево и вправо съезжают непонятно куда. Что можно сделать?

P.S В верстке новичок, ранее только back-end)

Код:

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <link rel="stylesheet" type="text/css" href="assets/css/cars.css">
            <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
            <script src="assets/js/jquery-3.2.1.js"></script>
            <script src="assets/js/bootstrap.min.js"></script>
        </head>
        <body>
         <div class = "float-right">
             <div class = "card">
                 <div class= "card-body">
                        <div id = "about">
                                <h4 id>Что-нибудь позже тут напишу</h4>
                            </div>
                        <div id = "content">
                                <h4 class = "text-center" id = "car_info">Выберите автомобиль:</h4>
                                <button type="button" id = "next_btn" class="btn btn-outline-primary float-left"><-</button>
                                <h4 class = "text-center" id = "car_info">Tesla</h4>
                                <button type="button" id = "previus_btn" class="btn btn-outline-primary float-right">-></button>
                        </div>
                            <div id = "end_button">
                                    <button type="button" id = "next" class="btn btn-outline-primary btn btn-block">Далее</button>
                        </div>
                 </div>
             </div>
         </div>
        </body>
    </html>

Answer 1

Есть 3 варианта.

Заверни в row эти 3 элемента.
Заверни в конструкцию ul li.
Попробуй не использовать тег h4

Answer 2

Можно использовать возможности CSS3, а именно CSS Flexbox.

Добавляете к родительскому элементу css-свойство display: flex;, по дефолту, элементы будут размещены по горизонтали, как вам и нужно.

Подробнее: https://www.w3schools.com/css/css3_flexbox.asp

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как вызвать функцию Django из шаблона?

Есть функция synch определённая в viewspy, которая внутри себя обращается к функции get_companies, которая в свою очередь делает запрос к API стороннего...

304

HTML