введите здесь описание изображенияКнопку «Клиентская область» нужно переместить в правую часть панели навигации, но когда я попробовал несколько вещей, я не смог заставить ее переместиться с того места, где она находится на данный момент. . Я пробовал некоторые вещи, но это не сработало. Каков хороший способ решить эту проблему. Я не мог найти решение, чтобы заставить это работать.
/* 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 Если вы откроете полноэкранный режим, вы увидите, что клиентская область не распространяется на правую часть экрана.
Обратите внимание, что ваш HTML-код недействителен. <a>
не может быть ребенком <ul>
Вы можете создать элемент прямо перед «Клиентской областью» и использовать 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>
Клиентская зона отображается справа для меня...