Выстроить кнопки по одной линии

@alniz · Регистрация: 17.12.2020

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

Есть четыре кнопки, их нужно выстроить по одной линии так (на странице html), чтобы две были справа, а другие две слева. Как это сделать, подскажите, пожалуйста.

Добавлено через 5 минут
Сейчас я сделала в html так:

HTML5
1
2
3
<div class="header">
...
</div>

В CSS так:

CSS
1
2
3
4
5
.header {
    background: none; 
    display: flex;
    justify-content: space-between;
}

Результат не нравится.

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

HTML5
1
2
3
<div id="sidebar">
...
</div>

Что не так делаю?

CSS
1
2
3
4
5
6
#sidebar { 
    width: 200px; background: none; border-left: 1px solid none;
    right: 0px; /* Расстояние от верхнего края */ 
    display: inline-block;
    bottom: 0; /* Расстояние снизу  */
   }

@AlexZaw · 27.04.2021, 01:24

Сообщение от alniz

Что не так делаю?

Не показываете весь код, вот что вы не так делаете. Если про кнопки еще можно что-то предположить, то что за информеры, как они размечены, какие у них стили, где они находятся (внутри sidebar или sidebar это и есть один из информеров) остается только гадать. Учитесь правильно задавать вопросы.

С кнопками, возможно, поможет вот этот код:

CSS
1
2
3
.header :nth-child(3){
  margin-left: auto;
}

Но не факт. Потому как что-то мне подсказывает, что кнопки не являются прямыми потомками header...

@alniz · 11.05.2021, 21:19 **[ТС]**

AlexZaw,

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
31
32
33
34
35
36
37
38
 <div id='parent3'class="parent2">
  <div class="left2">
        <h5 style="color:#87CEFA; float: left; margin: 1%">текст1</h5> 
        <h5 style="color:#00BFFF; float: left; margin: 1%">текст2</h5>
        <title>текст3</title>
        <link href="style1.css" type="text/css" rel="stylesheet" />
        <br>
    <div class="one">
        <h1 style="color:#ffffff; float: left; margin: 0%">текст3</h1>
        
    </div>  
 
    <a href="1.html" class="pressed-button">кнопка меню1</a>
    <a href="2.html" class="pressed-button">кнопка меню2</a>
    <a href="3.html" class="pressed-button">кнопка меню3</a>
    <a href="4.html" class="pressed-button">кнопка меню4</a>
    
    </div>
     <div class="right2">
    <script language="javascript" type="text/javascript"><!--
var d = new Date();
 
var day=new Array("Воскресенье","Понедельник","Вторник",
"Среда","Четверг","Пятница","Суббота");
 
var month=new Array("января","февраля","марта","апреля","мая","июня",
"июля","августа","сентября","октября","ноября","декабря");
 
document.getElementsByClassName('right2')[0].insertAdjacentHTML('afterbegin', '<div id="myDate">' + day[d.getDay()]+" " +d.getDate()+ " " + month[d.getMonth()] + " " + d.getFullYear() + " г." + '</div>');
myDate.style.fontSize = "20pt";
//--></script>
<audio controls autoplay="autoplay">
   <source src="1.mp3"  type="audio/mpeg">
   Ваш браузер не поддерживает тег audio.
</audio>
 
</div>
    </div>

Как выстроить кнопки меню в одну строчку с заголовками?

@DrType · 14.05.2021, 00:19

Можно задать display:flex для .left2.

@alniz · 15.05.2021, 23:27 **[ТС]**

DrType, а если только для заголовков h5?

Добавлено через 5 минут
DrType, применила

Сообщение от DrType

display:flex для .left2.

- сработало, но кнопки меню видоизменились (плохо стали выглядеть). Пока вернула все.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11680&d=1772460536 Одним из. . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .
SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 19.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .

@DrType 6553 / 3624 / 1075 Регистрация: 07.09.2019 Сообщений: 5,877 Записей в блоге: 1
	14.05.2021, 00:19
	Можно задать `display:flex` для `.left2`. 0