网站导航栏社交媒体图标布局问题：无法与Logo、导航同行显示

问题现状 #

需要将社交媒体图标与Logo、导航栏置于同一行并对齐页面右上角，目前图标散乱分布，功能正常但布局不符预期。

问题根源 #

1. 社交媒体列表未纳入Pure网格系统的第三列容器，脱离了整体布局结构
2. 导航栏的pure-menu-list样式被复用在社交媒体列表上，导致图标继承了不合适的行高、内边距等属性

修复代码 #

修改后的HTML #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name=viewport content="width=device-width, initial-scale=1">
  <title>Rule One</title>
  <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css" integrity="sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5" crossorigin="anonymous">
  <link rel="stylesheet" href="StyleSheet.css">

</head>

<body>

  <div class="navigation-bar">
    <div class="pure-g">

      <div class="pure-u-1-3">
        <img id="RLogo" src="images/Rlogo.png">
      </div>

      <div class="pure-u-1-3">
        <ul class="pure-menu-list">
          <li class="pure-menu-item">
            <a href="#">Home</a></li>
          <li class="pure-menu-item"><a href="#">Events</a></li>
          <li class="pure-menu-item"><a href="#">Merch</a></li>
          <li class="pure-menu-item"><a href="#">Community</a></li>
          <li class="pure-menu-item"><a href="#">Jobs</a></li>
        </ul>
      </div>

      <div class="pure-u-1-3">
        <!-- 将社交媒体列表移入第三列容器 -->
        <ul class="social-links">
          <li class="pure-menu-item">
            <a href="https://www.youtube.com/@RuleOne"><img id="youtube" src="images/youtube.png"></a>
          </li>
          <li class="pure-menu-item">
            <a href="https://twitter.com/RuleOneGG"><img id="twitter" src="images/twitter.png"></a>
          </li>
          <li class="pure-menu-item">
            <a href="https://www.twitch.tv/ruleonegg"><img id="twitch" src="images/twitch.png"></a>
          </li>
          <li class="pure-menu-item">
            <a href="https://discord.com/invite/ruleone"><img id="discord" src="images/discord.png"></a>
          </li>
          <li class="pure-menu-item">
            <a href="https://www.instagram.com/ruleone.gg/"><img id="instagram" src="images/instagram.png"></a>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <div>
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur dolorum blanditiis nobis cumque, eum reiciendis quam deserunt animi facilis, omnis voluptatibus doloremque similique? Placeat praesentium totam iste accusantium modi voluptatibus.</p>
  </div>
</body>
<footer> Rule One Esports Team</footer>

</html>

修改后的CSS #

/*Navigation Bar*/

#RLogo {
  padding: 10px;
  /* 让Logo垂直居中 */
  vertical-align: middle;
}

.navigation-bar {
  background-color: #EFE9D7;
  height: 100px;
  width: 100%;
  /* 确保内部元素垂直居中 */
  display: flex;
  align-items: center;
}

.pure-menu-list {
  padding: 10px;
  margin: 0px;
  text-align: center;
  display: inline-block;
  vertical-align: top;
}

.pure-menu-list li {
  list-style-type: none;
  padding: 0px;
  height: 24px;
  margin-top: 4px;
  margin-bottom: 4px;
  display: inline;
}

.pure-menu-list li a {
  color: #171a1f;
  font-size: 16px;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  text-decoration: none;
  line-height: 70px;
  padding: 5px 15px;
  opacity: 0.7;
}

/* 社交媒体图标专属样式 */
.social-links {
  list-style: none;
  padding: 0;
  margin: 0;
  /* 右对齐 */
  text-align: right;
}

.social-links li {
  display: inline-block;
  margin-left: 10px;
}

.social-links li a {
  /* 去掉继承的行高和内边距 */
  line-height: normal;
  padding: 0;
}

.social-links img {
  /* 统一图标大小，可根据需求调整 */
  width: 24px;
  height: 24px;
  vertical-align: middle;
}

/*footer*/

footer {
  background-color: #EFE9D7;
}

关键修改点 #

• 将社交媒体列表移入Pure网格的第三列容器，确保与Logo、导航栏处于同一行布局
• 新增social-links类，为社交媒体图标设置独立样式，避免与导航链接的样式冲突
• 调整导航栏为flex布局，确保内部所有元素垂直居中
• 统一社交媒体图标的大小，优化间距和对齐方式

内容的提问来源于stack exchange，提问作者michael Derricott