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

Я построил этот заголовок, используя собственные имена классов CSS и начальной загрузки. Я уже пробовал z-index, float: initial свойства. заранее спасибо

.branding-preview {
    height: 75px;
    margin-left: 15px;
    margin-right: 15px;
    background-color: #0071bb;
}

.branding-logo {
    float: left;
    height: 50px;
    font-size: 18px;
    padding: 15px 15px;
}

.branding-logo img {
    width: 300px;
    height: 50px;
}

.branding-powered-by-logo {
    float: right;
    height: 50px;
    color: white;
    font-size: 15px;
    padding: 2px 10px;
}

.preview-menu {
    margin: 30px 0 0 0;
}

.preview-menu > li > a {
    margin: 0 3px;
    color: white;
    text-transform: uppercase;
    border-bottom: solid 1px transparent;
    background-color: transparent !important;
}

<div class = "branding-preview">
	<div class = "branding-logo">
		<img id = "branding-logo" src = "/path/to/logo">
	</div>
	<div class = "branding-powered-by-logo">
		<span>Powered By</span>
		<img id = "branding-powered-by-logo" src = "/path/to/logo" height = "30">
	</div>
	<ul class = "navbar-nav navbar-right nav preview-menu">
		<li><a>Start</a></li>
		<li><a>Plan</a></li>
		<li><a>Manage</a></li>
		<li><a>Learn</a></li>
		<li><a>Admin</a></li>
	</ul>
</div>

Это результат, который я получаю с текущим кодом, фактический результат:

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

Вот как я надеюсь, что это будет выглядеть, ожидаемый результат:

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

Разве вы не можете просто позиционировать абсолютный логотип бренда с предварительным просмотром бренда как относительное положение?

— 13.02.2019 12:15

Или заключите «питание от» и «навигация» в один элемент DIV и сделайте так, чтобы он перемещался вправо. Пусть «питание от» будет выровнено по тексту по правому краю и не будет плавать как для «питание от», так и для «навигации».

— 13.02.2019 12:21

html css twitter-bootstrap twitter-bootstrap-3 navbar

13.02.2019 12:00

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

857

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Я думаю, вам просто нужно добавить position:absolute; right:0px; в ваш класс .preview-menu.

13.02.2019 12:15

Ответ принят как подходящий

Это не просто без всех правил css, но концепция такова: создайте обертку, плавающую вправо, и внутри создайте 2 строки, одну для branding-powered-by-logo и display:block вторая строка зависит от фактического CSS, но, вероятно, работает без каких-либо изменений.

Если вы можете опубликовать реальную страницу, мы можем помочь вам с большей точностью. Надеюсь, это поможет вам.

.branding-preview {
    display:block;
    height: 75px;
    margin-left: 15px;
    margin-right: 15px;
    background-color: #0071bb;
}

.branding-logo {
    float: left;
    height: 50px;
    font-size: 18px;
    padding: 15px 15px;
}

.branding-logo img {
    width: 300px;
    height: 50px;
}

.branding-powered-by-logo {
    /* ADDED */
      display:block;
      text-align:right;
    
    height: 50px;
    color: white;
    font-size: 15px;
    padding: 2px 10px;
}

.preview-menu {
    margin: 0px 0 0 0;
}

.preview-menu > li > a {
    margin: 0 3px;
    color: white;
    text-transform: uppercase;
    border-bottom: solid 1px transparent;
    background-color: transparent !important;
}


/* ADDED */
.wrapper-logo-navbar {
  float: right;
}
.preview-menu > li {
  display: inline-block;
}

<div class = "branding-preview">
	<div class = "branding-logo">
		<img id = "branding-logo" src = "/path/to/logo">
	</div>
  
  <div class = "wrapper-logo-navbar">
    <div class = "branding-powered-by-logo">
      <span>Powered By</span>
      <img id = "branding-powered-by-logo" src = "https://cdn.pixabay.com/photo/2012/05/02/19/27/head-46086_960_720.png" height = "30">
    </div>
    <ul class = "navbar-nav navbar-right nav preview-menu">
      <li><a>Start</a></li>
      <li><a>Plan</a></li>
      <li><a>Manage</a></li>
      <!-- removed some elements for the rendering on StackOverflow -->
    </ul>
  </div>
</div>

13.02.2019 12:56

Другие вопросы по теме

Bootstrap pull div на среднем экране не работает

Кнопка остается выбранной, а переключатель .classList в JS запускается только через раз

Ошибка с шестнадцатеричным цветом во встроенном SVG в chrome 72

Как добавить пользовательский файл выбора в угловые формы материала для загрузки документа

Как сохранить изображение в БД с прикрепленным к нему элементом с помощью события перетаскивания и отобразить изображение с прикрепленным элементом в том же положении, в котором оно было перетащено

Настройка JS/CSS в виджете TrustPilot

Размытие текста после скрытия полосы прокрутки с помощью webkit

Проблема с центрированием логотипа при изменении размера экрана

Активировать действие флажка с помощью CSS

Изменить ширину и высоту области просмотра для определенного div

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

Ответы 2

Другие вопросы по теме

Похожие вопросы