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

Введите здесь описание изображенияКнопку «Клиентская область» нужно переместить в правую часть панели навигации, но когда я попробовал несколько вещей, я не смог заставить ее переместиться с того места, где она находится на данный момент. . Я пробовал некоторые вещи, но это не сработало. Каков хороший способ решить эту проблему. Я не мог найти решение, чтобы заставить это работать.

/* Main website */

* {
  background-color: #232323;
  color: white;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Kumbh Sans', sans-serif;
}


/* Navigation bar */


/* Navigation items */

.navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #000f14;
  display: flex;
  align-items: center;
}

.navbar li a {
  display: block;
  text-align: center;
  padding: 12px 16px;
  text-decoration: none;
  background: #000f14;
}

.navbar img {
  width: 50%;
  height: 50%;
}

.navbar a {
  background: #000f14;
}


/* Navigation  Client area Button */

.btn {
  border: 2.5px solid #053F74;
  background-color: #000f14;
  color: white;
  padding: 12px 16px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 15px;
  text-decoration: none;
}

.btn:hover {
  background: #053F74;
}
<nav class = "navbar">
  <div class = "navbar__container">
    <div class = "navbar__toggle" id = "mobile-menu">
      <span class = "bar"></span>
      <span class = "bar"></span>
      <span class = "bar"></span>
    </div>
    <ul>
      <li>
        <a href = "/index.html"><img src = "/images/AquaTech navbar logo.png" alt = "navbar__logo"></a>
      </li>
      <li><a href = "index.html">Home</a></li>
      <li><a href = "services.html">Services</a></li>
      <li><a href = "clients.html">Clients</a></li>
      <li><a href = "contact.html">Contact</a></li>
      <li><a href = "about.html">About us</a></li>
      <a href = "login.html"><button class = "btn">Client Area</button></a>
    </ul>
  </div>
</nav>

введите здесь описание изображения

Клиентская зона отображается справа для меня...

canon 13.02.2023 16:54

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

j08691 13.02.2023 17:07

Обратите внимание, что ваш HTML-код недействителен. <a> не может быть ребенком <ul>

j08691 13.02.2023 17:09
Калькулятор CGPA 12 для семестра
Калькулятор CGPA 12 для семестра
Чтобы запустить этот код и рассчитать CGPA, необходимо сохранить код как HTML-файл, а затем открыть его в веб-браузере. Для этого выполните следующие...
ONLBest Online HTML CSS JAVASCRIPT Training In INDIA 2023
ONLBest Online HTML CSS JAVASCRIPT Training In INDIA 2023
О тренинге HTML JavaScript :HTML (язык гипертекстовой разметки) и CSS (каскадные таблицы стилей) - две основные технологии для создания веб-страниц....
Настройка шаблона Metronic с помощью Webpack и Gulp
Настройка шаблона Metronic с помощью Webpack и Gulp
Я пишу эту статью, чтобы поделиться тем, как настроить макет Metronic с помощью Sass, поскольку Metronic предоставляет так много документации, и они...
Погружение в HTML и инструменты торговли
Погружение в HTML и инструменты торговли
Это была невероятная первая неделя в качестве стипендиата Bytewise Frontend Development Fellow, и я очень рад поделиться со всеми вами всем тем, чему...
Как создать страницу входа в систему с помощью HTML с использованием CSS.
Как создать страницу входа в систему с помощью HTML с использованием CSS.
Создание страницы входа в систему является важной частью создания веб-сайта или приложения, требующего аутентификации пользователя. Простую страницу...
Псевдоэлементы
Псевдоэлементы
Псевдоэлемент CSS - это ключевое слово, добавляемое к селектору, которое позволяет стилизовать определенную часть выбранного элемента (элементов)....
1
3
56
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы можете создать элемент прямо перед «Клиентской областью» и использовать margin:auto или использовать flex-grow: 1.

/* Main website */

* {
  background-color: #232323;
  color: white;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Kumbh Sans', sans-serif;
}


/* Navigation bar */


/* Navigation items */

.navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #000f14;
  display: flex;
  align-items: center;
}
.navbar ul .spacer {
  flex-grow: 1;
}
.navbar li a {
  display: block;
  text-align: center;
  padding: 12px 16px;
  text-decoration: none;
  background: #000f14;
}
<nav class = "navbar">
  <div class = "navbar__container">
    <div class = "navbar__toggle" id = "mobile-menu">
      <span class = "bar"></span>
      <span class = "bar"></span>
      <span class = "bar"></span>
    </div>
    <ul>
      <li>
        <a href = "/index.html"><img src = "/images/AquaTech navbar logo.png" alt = "navbar__logo"></a>
      </li>
      <li><a href = "index.html">Home</a></li>
      <li><a href = "services.html">Services</a></li>
      <li><a href = "clients.html">Clients</a></li>
      <li><a href = "contact.html">Contact</a></li>
      <li><a href = "about.html">About us</a></li>
      <div class = "spacer"></div>
      <a href = "login.html"><button class = "btn">Client Area</button></a>
    </ul>
  </div>
</nav>
Ответ принят как подходящий

Вы можете использовать margin-inline: auto 0 для своего элемента привязки. Немного информации о том, как использовать поля от Кевина Пауэлла здесь и здесь.

/* Main website */

* {
  background-color: #232323;
  color: white;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Kumbh Sans', sans-serif;
}


/* Navigation bar */


/* Navigation items */

.navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #000f14;
  display: flex;
  align-items: center;
}

.navbar li a {
  display: block;
  text-align: center;
  padding: 12px 16px;
  text-decoration: none;
  background: #000f14;
}

.navbar img {
  width: 50%;
  height: 50%;
}

.navbar a {
  background: #000f14;
}


/* Navigation  Client area Button */

.btn {
  border: 2.5px solid #053F74;
  background-color: #000f14;
  color: white;
  padding: 12px 16px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 15px;
  text-decoration: none;
}

.btn:hover {
  background: #053F74;
}

/* added this class */
.align-right {
  margin-inline: auto 0;
}
<nav class = "navbar">
  <div class = "navbar__container">
    <div class = "navbar__toggle" id = "mobile-menu">
      <span class = "bar"></span>
      <span class = "bar"></span>
      <span class = "bar"></span>
    </div>
    <ul>
      <li>
        <a href = "/index.html"><img src = "/images/AquaTech navbar logo.png" alt = "navbar__logo"></a>
      </li>
      <li><a href = "index.html">Home</a></li>
      <li><a href = "services.html">Services</a></li>
      <li><a href = "clients.html">Clients</a></li>
      <li><a href = "contact.html">Contact</a></li>
      <li><a href = "about.html">About us</a></li>
      <a class='align-right' href = "login.html"><button class = "btn">Client Area</button></a><!-- added the class 'align-right' to the <a> element -->
    </ul>
  </div>
</nav>

Другой способ, которым я иногда это делаю, — добавить фиктивный элемент в качестве прокладки и использовать flex-grow, чтобы сдвинуть элементы рядом с ним влево и вправо.

/* Main website */

* {
  background-color: #232323;
  color: white;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Kumbh Sans', sans-serif;
}


/* Navigation bar */


/* Navigation items */

.navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #000f14;
  display: flex;
  align-items: center;
}

.navbar li a {
  display: block;
  text-align: center;
  padding: 12px 16px;
  text-decoration: none;
  background: #000f14;
}

.navbar img {
  width: 50%;
  height: 50%;
}

.navbar a {
  background: #000f14;
}


/* Navigation  Client area Button */

.btn {
  border: 2.5px solid #053F74;
  background-color: #000f14;
  color: white;
  padding: 12px 16px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 15px;
  text-decoration: none;
}

.btn:hover {
  background: #053F74;
}

/* added this class */
.spacer {
  flex-grow:2;
}
<nav class = "navbar">
  <div class = "navbar__container">
    <div class = "navbar__toggle" id = "mobile-menu">
      <span class = "bar"></span>
      <span class = "bar"></span>
      <span class = "bar"></span>
    </div>
    <ul>
      <li>
        <a href = "/index.html"><img src = "/images/AquaTech navbar logo.png" alt = "navbar__logo"></a>
      </li>
      <li><a href = "index.html">Home</a></li>
      <li><a href = "services.html">Services</a></li>
      <li><a href = "clients.html">Clients</a></li>
      <li><a href = "contact.html">Contact</a></li>
      <li><a href = "about.html">About us</a></li>
      <li class='spacer'></li><!-- added this spacer element  -->
      <a href = "login.html"><button class = "btn">Client Area</button></a>
    </ul>
  </div>
</nav>

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