Не могу добиться расположение 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

@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-ов в одной строчке

Решение