css 如何将按钮移动到导航栏的右侧？

tkclm6bt 于 2023-02-14 发布在其他

关注(0)|答案(2)|浏览(253)

enter image description here "客户端区域"按钮需要移动到导航栏的右侧，但是当我尝试了一些方法时，我无法将其从当前所在的位置移动。我尝试了一些方法，但它不起作用。解决此问题的好方法是什么？我无法找到解决方案。

/* 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>

enter image description here

css

来源：https://stackoverflow.com/questions/75438171/how-could-i-move-the-button-to-the-right-side-of-the-navigation-bar

2条答案

按热度按时间

j2datikz1#

您可以在"Client area"之前创建一个元素，并使用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>

赞(0）回复(0）举报 2023-02-14

b1uwtaje2#

你可以使用margin-inline: auto 0到你的锚元素。一些关于如何使用边距的信息来自凯文鲍威尔here和here。

/* 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将其旁边的元素推到左边和右边。
一个二个一个一个

赞(0）回复(0）举报 2023-02-14

我来回答

css 如何将按钮移动到导航栏的右侧？

2条答案

相关问题

热门标签

最新问答