Как сделать так, что бы лого и кнопки были на одной строке?

Question

[Даниил Николаев]

Comments

[Алан Гибизов]

Если нет кода, не надо ставить тэг языка.

[Вадим]

в первом своём вопросе Вы дали код. В этом чего постеснялись? Как Вы ответить предлагаете? Ссылками на документацию где будет описаны все возможные методы сделать два элемента на одном уровне? Или по хрустальному шару погадать? Или предпочитаете кофейную гущу?

[Ankhena]

Флексы, гриды, инлайн-блоки и даже флоаты с таблицами...
В современном мире разумнее отдать предпочтение первым двум.
Что вы уже пробовали? Что не получилось?

[MasterGod]

Алан Гибизов, у него же вопрос по факту по css, разве не так?

[Алан Гибизов]

MasterGod, нет, у него вопрос «сделайте за меня, у меня лапки». Вот если бы он привел свою попытку, можно было бы ставить тэг того ЯП, на котором код попытки.

Answer 1

[MasterGod]

Для решения проблемы можно использовать технологию, которая называется flexbox
С помощью "обтекание" (float), мы добивается того что один элемент плавает вокруг другого. Но для этого у первого и второго надо указать с какой стороны они будут состыковаться. Пример

float: left (применяем к логотипу)
float: right ( применяем к "кнопке".)
Это позволит 2 элемента разместить на одной строке
https://hcdev.ru/css/justify-content/

Второй способ решения проблемы, это дать поведение блоянвм элементам( у которых всегда есть отступы, начинаются с новой строки, после них новый элемент тоже идёт с новой строки) поведение строчного элемента ( строчный элемент занимает только то пространство которое ему необходимо) таким образом проблему можно решить как минимум двумя способами.
https://hcdev.ru/css/grid-template-columns/

Лого и ссылки.

споллер

Впринципе это смотрится нормально, только расположить ссылки либо слева и лого там же .
Так делают. Либо
Лого слева ссылки по центру (твой вариант) . Но, я бы на твоём месте изменил задний фон под лого. И протянул бы по его ширине как полосу до конца экрана , например задним фоном, того же цвета или ту что будет гармонировать. Можно шире, но тогда можно рассмотреть вариан когда контр картинни будет гармоничным. Тогда внешний вид будет лучше. Можно ссылки как то выделить фоном, или действительно их сделать кнопками? Добавить чтоб при наведении менялся цвет под ними.
А ещё можно добавить анимацию, чтоб лого появлялся не сразу. Вариантов много..
Но тут творец ты.

Comments

[Ankhena]

У блочного элемента вставь поведение строчного. У одного элемента ставишь float с одной стороны, у другого с противоположной.

Что?
Вы когда-нибудь пробовали флоатам задавать display inline? Или дочерним элементам флекса или грида?

Ну кроме того, что не стоит рекомендовать использовать флоат для того, для чего он не предназначен.
Писать про обтекание применительно к флексам и гридам тоже...
У новичков каша в голове сама образуется, не добавляйте им своей.

[MasterGod]

Ankhena Обтекание это float, это его перевод вроде. Из за того что элементы плавают друг вокруг друга. Это один из способов проблемы с который я подсказал как решение. Второе это было присвоить юлочному элементу поведение строчного чтоб он занимал только необходимое ему пространство.
Нужен пример?

Ставим float: left к лого и float: right к "кнопке". Это позволит 2 элемента разместить на одной строке.
Это первый способ
Который был указан. Второй. Был обьяснен в этом комментарии выше.

[MasterGod]

Ankhena, я несколько поправил ответ, чтоб не было в куче. Так понятнее стало?

[Ankhena]

MasterGod, если ещё немножко поформатировать и исправить грамматические ошибки и опечатки будет огонь.

А то сейчас, вы говорите, что второй способ это инлайн (лучше бы инлайн блоки). И прикрепляете ссылку, внезапно, на гриды.
Какое отношение имеют гриды к инлайнам не ясно.

Хорошо бы добавить, что и флоаты и инлайнблоки это устаревшие способы. А актуальные - флексы и гриды.

Но автор вопроса вообще не считает нужным участвовать в обсуждении и уточнять, что именно не выходит.