克隆Usabilityhub网站时导航栏Signin按钮无法与其他链接同行

克隆Usabilityhub网站时，给Signin按钮添加border和padding样式后，该按钮无法与Product、Customers等其他导航链接处于同一行，无法实现预期布局。

问题截图 #

• 异常效果：
  
• 预期效果：
  

现有代码 #

CSS代码 #

@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;
}

HTML代码 #

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

问题原因 #

当前布局异常的核心原因是：

• 普通导航链接的padding是加在<a>标签上，而Signin按钮的padding和border是加在<li>标签上，导致两者的高度计算不一致。
• 父容器ul没有设置align-items: center，flex布局默认align-items: stretch，会让元素高度撑满容器，但由于内外边距的位置不同，导致视觉上错位。

解决方法 #

方案一：统一样式应用对象（推荐） #

把Signin的样式移到内部的<a>标签上，和普通导航链接保持一致，同时给ul添加垂直居中对齐：

修改后的CSS部分：

/* 调整ul的flex对齐 */
ul {
  list-style: none;
  display: flex;
  justify-content: end;
  gap: 40px;
  align-items: center; /* 添加这行，让所有li垂直居中 */
}

/* 修改Signin的样式选择器，应用到a标签 */
.Signin a {
  border: 0.5px solid #b9cde4;
  border-radius: 6px;
  color: #183b56;
  font-weight: 600;
  padding: 12px 24px;
  display: inline-block; /* 确保padding生效 */
}

/* 保留原有的links样式 */
.links {
  padding: 12px 24px;
}

方案二：给所有li设置垂直居中 #

如果不想调整样式的应用对象，也可以给每个<li>添加display: flex; align-items: center;，确保内部元素垂直居中：

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

/* 原Signin样式保留 */
.Signin {
  border: 0.5px solid #b9cde4;
  border-radius: 6px;
  color: #183b56;
  font-weight: 600;
  padding: 12px 24px;
}

这两种方案都能让Signin按钮和其他导航链接保持在同一行，实现预期的布局效果。

内容的提问来源于stack exchange，提问作者Naveen Pavirala