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

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

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

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

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
.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
1
2
3
4
.menu-btn {
    float: right;
    width: 431px;
}

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

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

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
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

пойдёт?

Новые блоги и статьи Все статьи Все блоги /
ПЛИС zxcha1ka_ 27.01.2026 AHDL Разработать программы для синтеза следующих устройств: 1. Параллельного регистра 4-х разрядного с синхронной загрузкой и асинхронным сбросом (обнулением); Пoмoгитe пoжaлyйстa	Загрузка PNG-файла с альфа-каналом с помощью библиотеки SDL3_image на Android 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Решение