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

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

/* 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
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
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>

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