尝试克隆 Usabilityhub 网站时，我没有在导航栏的一行中获得登录和注册按钮

问题描述 投票：0回答：1

我无法在同一行中制作登录按钮和其他导航链接。

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&family=Roboto:wght@400;700&family=Ubuntu&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  margin-inline: 50px;
}


/* top section*/

header {
  background: #e74694;
  background-image: url(./asset\ 32.png);
  background-size: 22%;
}

.top-section {
  color: #ffffff;
  font-family: 'Poppins';
  padding: 15px 20px;
  text-align: center;
  font-size: 14px;
}


/* nav section*/

.logo img {
  width: 200px;
}

ul {
  list-style: none;
  display: flex;
  justify-content: end;
  gap: 40px;
}

.navsection {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 25px;
}

.nav-links ul {
  justify-content: end;
}

.nav-links ul li a {
  text-decoration: none;
}

.Signin {
  border: 0.5px solid #b9cde4;
  border-radius: 6px;
  color: #183b56;
  font-weight: 600;
  padding: 12px 24px;
}

.links {
  padding: 12px 24px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!--top section-->
<header>
  <div class="top-section container">
    <p> 📣 Figma prototype testing just got a whole lot better! Read more → </p>

  </div>
</header>

<!--Navigation section-->
<div class="navsection container">
  <div class="logo">
    <a>
      <img src="./asset 1.png" alt="logo">
    </a>
  </div>
  <div class="nav-links">
    <ul>
      <li><a href="#" class="links">Product</a></li>
      <li><a href="#" class="links">Customers</a></li>
      <li><a href="#" class="links">Pricing</a></li>
      <li><a href="#" class="links">Resources</a></li>
      <li class="Signin"><a href="#">Sign in</a></li>
      <li class="Signup"><a href="#">Sign up</a></li>
    </ul>
  </div>
</div>

使用边框和填充时，登录按钮与其他链接不在同一个链接中Sign in button was not on same line as other nav links this is desired output 使用边框时，我无法在同一行中获得登录按钮和其他 li 标签，为其填充。

html css frontend uinavigationbar navbar
1个回答
0
投票

我添加到导航部分：

    .nav-links > ul > li {
     display: flex;
     align-items:center;
    }

并将

Singin
的价值观写到
Signup
班级。另外为了防止自动换行，我为这些类写了
inline-size
属性。

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&family=Roboto:wght@400;700&family=Ubuntu&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  margin-inline: 50px;
}

/* top section*/

header {
  background: #e74694;
  background-image: url(./asset\ 32.png);
  background-size: 22%;
}

.top-section {
  color: #ffffff;
  font-family: "Poppins";
  padding: 15px 20px;
  text-align: center;
  font-size: 14px;
}

/* nav section*/

.logo img {
  width: 200px;
}

ul {
  list-style: none;
  display: flex;
  justify-content: end;
  gap: 40px;
}

.navsection {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 25px;
}

.nav-links > ul > li {
  display: flex;
  align-items:center;
}

.nav-links ul {
  justify-content: end;
}

.nav-links ul li a {
  text-decoration: none;
}

.Signin {
  border: 0.5px solid #b9cde4;
  border-radius: 6px;
  color: #183b56;
  font-weight: 600;
  padding: 12px 24px;
  inline-size: 100px;
}

.Signup {
  border: 0.5px solid #b9cde4;
  border-radius: 6px;
  color: #183b56;
  font-weight: 600;
  padding: 12px 20px;
  inline-size: 101px;
}

.links {
  padding: 12px 24px;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <!--top section-->
    <header>
      <div class="top-section container">
        <p>📣 Figma prototype testing just got a whole lot better! Read more →</p>
      </div>
    </header>

    <!--Navigation section-->
    <div class="navsection container">
      <div class="logo">
        <a>
          <img src="./asset 1.png" alt="logo" />
        </a>
      </div>
      <div class="nav-links">
        <ul>
          <li><a href="#" class="links">Product</a></li>
          <li><a href="#" class="links">Customers</a></li>
          <li><a href="#" class="links">Pricing</a></li>
          <li><a href="#" class="links">Resources</a></li>
          <li class="Signin"><a href="#">Sign in</a></li></span>
          <li class="Signup"><a href="#">Sign up</a></li></span>
        </ul>
      </div>
    </div>
  </body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.