Не могу добиться расположение div-ов в одной строчке

@FreSia · Регистрация: 27.09.2016

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

Добрый день, не могу расположить с правой стороны меню и за ним сразу чтобы шла кнопка "sing in", выбивает эту кнопку ниже под меню, что можно в этом случае сделать. Прилагаю картинку что получается и что хочу увидеть

HTML5

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"> 
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Verstka1</title>
</head>
 
<body>
<header>
    <div class="center-block-main clearfix">
        <p class="logo"><img src="https://www.cyberforum.ru/images/logo.png" alt=""></p>
        <div class="menu-btn">
            <nav>
                <ul class="menu">
                    <li><a href="#">Label</a></li>
                    <li><a href="#">Label</a></li>
                    <li><a href="#">Label</a></li>
                </ul>
            </nav>
            <div class="subscribe-form">
                <form action="" method="get">
                    <input type="submit" class="submit-inpt" value="sign in"
                </form>
            </div>
        </div>
    </div>
</header>
</body>
</html>

CSS

.center-block-main{
    max-width: 960px;
    margin: 0 auto;
}
header{
    background: #f7fdfe;
    padding: 20px 0;
}
    .logo{
        float: left;
    }
    .menu-btn {
        float: right;
        overflow: hidden;
    }
        .menu{
            float: left;
        }
            .menu li {
                float: left;
                text-transform: uppercase;
                font-size: 0.875em;
                font-weight: bold;
                color: #82868f;
                margin-right: 40px;
            }
            .menu li a{
                color:#82868f; text-decoration:none;
            }
            .menu li a:hover{
                color:#0ebfdd;
            }
        .submit-inpt {
            background:#0ebfdd;
            float:right;
            border: none;
            color:#fff;
            text-transform:uppercase;
            padding:15px 40px;
            cursor:pointer;
            font-size:0.875em;
            -webkit-border-radius: 25px;
            -moz-border-radius: 25px;
            -o-border-radius: 25px;
            border-radius: 25px;
        }

@Kucc · 27.09.2016, 14:43

Отредактируйте сообщение правильно, использую соответствующие отсылки к коду

@Kucc · 27.09.2016, 14:48

вот

CSS

.menu-btn {
    float: right;
    width: 431px;
}

@Майкл Скоуфилд · 27.09.2016, 15:11

1.Не злоупотребляйте Float вы их столько натыкали что кошмар.
Всё на много проще display:inline-block и ширину выставить( с шириной уже поиграете сами, так как размеров картинки я не знаю.
2.у вас блоки были не верно выставлены местами. Переставил блок формы на второе место, так как он должен идти после картинки. Почитает про то как браузер заливает блоки во время чтения HTML кода.

HTML5

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"> 
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Verstka1</title>
</head>
 
<body>
<header>
<img src="images/logo.png" alt="">
 
 
<div class="subscribe-form">
<form action="" method="get">
<input type="submit" class="submit-inpt" value="sign in">
</form>
</div>
 
<nav>
<ul class="menu">
<li><a href="#">Label</a></li>
<li><a href="#">Label</a></li>
<li><a href="#">Label</a></li>
</ul>
</nav>
 
</header>
</body>
</html>

CSS

header{
background: #f7fdfe;
padding: 20px 0;
}
img{
    width: 30%;
}
.subscribe-form{
    display: inline-block;
    width: 30%;
}
 
nav{
    display: inline-block;
    width: 35%;
}
 
.menu li {
display: inline-block;
text-transform: uppercase;
font-size: 0.875em;
font-weight: bold;
color: #82868f;
margin-right: 40px;
}
 
.menu li a{
color:#82868f; text-decoration:none;
}
 
.menu li a:hover{
color:#0ebfdd;
}
 
.submit-inpt {
background:#0ebfdd;
border: none;
color:#fff;
text-transform:uppercase;
padding:15px 40px;
cursorointer;
font-size:0.875em;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
-o-border-radius: 25px;
border-radius: 25px;
}

Добавлено через 3 минуты
не особо хорошо задавать фиксированный размер при сужение экрана блоки сьедут вниз.
ну хотя смотря как автор хочет что б отображался сайт)

Добавлено через 4 минуты
Не правильно понял задачу.
В HTML коде просто поменяйте местами меню и кнопку. Кнопку на третье место и всё будет ок.

@FreSia · 27.09.2016, 15:35 **[ТС]**

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

@Майкл Скоуфилд · 27.09.2016, 15:44

1 блок картинка
2. блок меню
3 блок кнопка

В таком порядке выстави блоки в HTML коде

Добавлено через 5 минут
только именно в моём HTML коде и подключите мой CSS

@FreSia · 27.09.2016, 15:52 **[ТС]**

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

@Майкл Скоуфилд · 27.09.2016, 17:17

вот так?

CSS

header{
background: #f7fdfe;
padding: 20px 0;
height: 50px;
}
img{
    width: 30%;
    float: left;
}
.subscribe-form{
    display: inline-block;
    width: 15%;
    float: right;
}
 
nav{
    display: inline-block;
    width: 35%;
    float: right;
}
 
.menu li {
display: inline-block;
text-transform: uppercase;
font-size: 0.875em;
font-weight: bold;
color: #82868f;
margin-right: 40px;
}
 
.menu li a{
color:#82868f; text-decoration:none;
}
 
.menu li a:hover{
color:#0ebfdd;
}
 
.submit-inpt {
background:#0ebfdd;
border: none;
color:#fff;
text-transform:uppercase;
padding:15px 40px;
cursorointer;
font-size:0.875em;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
-o-border-radius: 25px;
border-radius: 25px;
}

@FreSia · 27.09.2016, 17:28 **[ТС]**

ну практически, только кнопка находиться правее меню, картинку скинула. Я просто новичок, вот пытаюсь практиковаться)

@Майкл Скоуфилд · 27.09.2016, 18:33

КНопка должна быть левее меню?
если да то просто поменяйте два блока местами.

@FreSia · 27.09.2016, 18:39 **[ТС]**

я поменяла в HTML, сначала идет картинка, затем меню и кнопка после, но все равно мне выбивает кнопку перед меню, я уже 2 дня калупаюсь, что только не пробовала, не хочет ставать так как надо. В принципи как Кисс написал оно что-то получилось, но при резиновой верстки оно не подходит

@Майкл Скоуфилд · 27.09.2016, 18:41

ну как же у вас кнопке перед меню если на вашем же скриншоте кнопка идёт после меню????

@FreSia · 27.09.2016, 18:42 **[ТС]**

нет, это я скинула что должно у меня получиться, а у меня кнопка то уходит перед меню, то под меню, после меню не хочет не в какую становиться

@Майкл Скоуфилд · 27.09.2016, 18:46

дайте мне картинку которая будет на месте логотипа.

@FreSia · 27.09.2016, 18:51 **[ТС]**

картинки пока не будет, я пытаюсь сверстать шапку для шаблона ) я наверное уже закалупала xD

@Майкл Скоуфилд · 27.09.2016, 18:53

картинку которая идёт по пути href="logo.png"
просто выложите мне логотип что б я мог его поставить в свой код.

@FreSia · 27.09.2016, 19:00 **[ТС]**

сообразила

@Майкл Скоуфилд · 27.09.2016, 19:03

вот так должно быть?

@FreSia · 27.09.2016, 19:03 **[ТС]**

да именно

@Майкл Скоуфилд · 27.09.2016, 19:05

пойдёт?

@Майкл Скоуфилд 11 / 10 / 3 Регистрация: 25.09.2015 Сообщений: 238
	27.09.2016, 18:33	10
	КНопка должна быть левее меню? если да то просто поменяйте два блока местами. 0

@Майкл Скоуфилд 11 / 10 / 3 Регистрация: 25.09.2015 Сообщений: 238
	27.09.2016, 18:41	12
	ну как же у вас кнопке перед меню если на вашем же скриншоте кнопка идёт после меню???? 0

@FreSia 0 / 0 / 0 Регистрация: 27.09.2016 Сообщений: 11
	27.09.2016, 18:42 [ТС]	13
	нет, это я скинула что должно у меня получиться, а у меня кнопка то уходит перед меню, то под меню, после меню не хочет не в какую становиться 0

Новые блоги и статьи
Книги и учебные ресурсы по C# InfoMaster 08.01.2025 Базовые учебники и руководства Одной из лучших книг для начинающих является "C# 10 и . NET 6 для начинающих" Эндрю Троелсена и Филиппа Джепикса . Книга последовательно раскрывает основные концепции. . .	Что такое NullReferenceException и как исправить? InfoMaster 08.01.2025 NullReferenceException - одно из самых распространенных исключений, с которым сталкиваются разработчики на C#. Это исключение возникает при попытке обратиться к членам объекта (методам, свойствам или. . .	Что такое Null Pointer Exception (NPE) и как это исправить? InfoMaster 08.01.2025 Null Pointer Exception (NPE) - это одно из самых распространенных исключений в Java, которое возникает при попытке использовать ссылку на объект, значение которой равно null. Это исключение относится. . .	Русский язык в консоли C++ InfoMaster 08.01.2025 При разработке программ на C++ одной из частых проблем, с которой сталкиваются русскоязычные программисты, является корректное отображение кириллицы в консольных приложениях. Эта проблема особенно. . .	Telegram бот на C# InfoMaster 08.01.2025 Разработка ботов для Telegram стала неотъемлемой частью современной экосистемы мессенджеров. C# предоставляет мощный и удобный инструментарий для создания разнообразных ботов, от простых. . .	Использование GraphQL в Go (Golang) InfoMaster 08.01.2025 Go (Golang) является одним из наиболее популярных языков программирования, используемых для создания высокопроизводительных серверных приложений. Его архитектурные особенности и встроенные. . .
Что лучше использовать при создании класса в Java: сеттеры или конструктор? Alexander-7 08.01.2025 Вопрос подробнее: На вопрос: «Когда одновременно создаются конструктор и сеттеры в классе – это нормально?» куратор уточнил: «Ваш класс может вообще не иметь сеттеров, а только конструктор и геттеры. . .	Как работать с GraphQL на TypeScript InfoMaster 08.01.2025 Введение в GraphQL и TypeScript В современной разработке веб-приложений GraphQL стал мощным инструментом для создания гибких и эффективных API. В сочетании с TypeScript, эта технология. . .	Счётчик на базе сумматоров + регистров и генератора сигналов согласования. Hrethgir 07.01.2025 Создан с целью проверки скорости асинхронной логики: ранее описанного сумматора и предополагаемых fast регистров. Регистры созданы на базе ранее описанного, предполагаемого fast триггера. То-есть. . .	Как перейти с Options API на Composition API в Vue.js BasicMan 06.01.2025 Почему переход на Composition API актуален В мире современной веб-разработки фреймворк Vue. js продолжает эволюционировать, предлагая разработчикам все более совершенные инструменты для создания. . .	Архитектура современных процессоров inter-admin 06.01.2025 Процессор (центральный процессор, ЦП) является основным вычислительным устройством компьютера, которое выполняет обработку данных и управляет работой всех остальных компонентов системы. Архитектура. . .	История создания реляционной модели баз данных, правила Кодда Programming 06.01.2025 Предпосылки создания реляционной модели В конце 1960-х годов компьютерная индустрия столкнулась с серьезными проблемами в области управления данными. Существовавшие на тот момент модели данных -. . .

@Kucc 5 / 2 / 3 Регистрация: 21.06.2013 Сообщений: 117
	27.09.2016, 14:43	2
	Отредактируйте сообщение правильно, использую соответствующие отсылки к коду Миниатюры 0

@FreSia 0 / 0 / 0 Регистрация: 27.09.2016 Сообщений: 11
	27.09.2016, 15:35 [ТС]	5
	а как же все таки сделать чтобы меню и кнопка были справа?) так они идут за логотипом, а мне нужно логотип - слева, а меню и кнопка - справа 0

@Майкл Скоуфилд 11 / 10 / 3 Регистрация: 25.09.2015 Сообщений: 238
	27.09.2016, 15:44	6
	1 блок картинка 2. блок меню 3 блок кнопка В таком порядке выстави блоки в HTML коде Добавлено через 5 минут только именно в моём HTML коде и подключите мой CSS 0

@FreSia 0 / 0 / 0 Регистрация: 27.09.2016 Сообщений: 11
	27.09.2016, 15:52 [ТС]	7
	я так и сделала, просто проблема в том что все блоки выставлены сразу за логотипом, а мне надо их по сторонам раскидать, чтобы блок с меню и кнопкой прилегали к правому краю, не к логотипу) как я скинула картинку, только еще и кнопку перенести к меню, подвинуть меню так сказать немного чтобы всунуть туда еще и кнопочку) 0

@FreSia 0 / 0 / 0 Регистрация: 27.09.2016 Сообщений: 11
	27.09.2016, 17:28 [ТС]	9
	ну практически, только кнопка находиться правее меню, картинку скинула. Я просто новичок, вот пытаюсь практиковаться) Миниатюры 0

@FreSia 0 / 0 / 0 Регистрация: 27.09.2016 Сообщений: 11
	27.09.2016, 18:39 [ТС]	11
	я поменяла в HTML, сначала идет картинка, затем меню и кнопка после, но все равно мне выбивает кнопку перед меню, я уже 2 дня калупаюсь, что только не пробовала, не хочет ставать так как надо. В принципи как Кисс написал оно что-то получилось, но при резиновой верстки оно не подходит 0

@Майкл Скоуфилд 11 / 10 / 3 Регистрация: 25.09.2015 Сообщений: 238
	27.09.2016, 18:46	14
	дайте мне картинку которая будет на месте логотипа. 0

@FreSia 0 / 0 / 0 Регистрация: 27.09.2016 Сообщений: 11
	27.09.2016, 18:51 [ТС]	15
	картинки пока не будет, я пытаюсь сверстать шапку для шаблона ) я наверное уже закалупала xD 0

@Майкл Скоуфилд 11 / 10 / 3 Регистрация: 25.09.2015 Сообщений: 238
	27.09.2016, 18:53	16
	картинку которая идёт по пути href="logo.png" просто выложите мне логотип что б я мог его поставить в свой код. 0

@FreSia 0 / 0 / 0 Регистрация: 27.09.2016 Сообщений: 11
	27.09.2016, 19:00 [ТС]	17
	сообразила Изображения 0

@Майкл Скоуфилд 11 / 10 / 3 Регистрация: 25.09.2015 Сообщений: 238
	27.09.2016, 19:03	18
	вот так должно быть? Миниатюры 0

@FreSia 0 / 0 / 0 Регистрация: 27.09.2016 Сообщений: 11
	27.09.2016, 19:03 [ТС]	19
	да именно 0

Не могу добиться расположение div-ов в одной строчке

Решение