时间戳

首页 > 解决方案 > 如何将文本与同一行的标题链接的一侧对齐？

html - 如何将文本与同一行的标题链接的一侧对齐？

问题描述

我如何将 GSS 从三个链接的顶部移动到左侧的同一行，两个 div 之间有很大的空间？

.gssnav {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.nav-padding {
  margin-top: 30px;
}

.navbar {
  display: flex;
  flex-direction: row;
  justify-content: center;
  column-gap: 30px;
}

.navlink {
  cursor: pointer;
  color: #000000;
  border: transparent;
}

.navlink:hover {
  cursor: pointer;
  color: #ffffff;
  border: primary;
  transition-duration: 500ms;
}
<div>
  <header class="nav-padding">
    <div>
      <nav>
        <div class="gssnav">
          GSS
        </div>
        <div class="navbar">
          <a href="index.html" class="navlink">Home</a>
          <a href="projects.html" class="navlink">Projects</a>
          <a onclick="smoothScrollTo('Links')" class="navlink">Links</a>
        </div>
      </nav>
    </div>
  </header>
</div>

标签： htmlcss

解决方案

Flex 布局规则适用于父元素，您可以使用它justify-content: space-between来传播内容。请参阅https://css-tricks.com/snippets/css/a-guide-to-flexbox。

nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.nav-padding {
  margin-top: 30px;
}

.navbar {
  display: flex;
  flex-direction: row;
  justify-content: center;
  column-gap: 30px;
}

.navlink {
  cursor: pointer;
  color: #000000;
  border: transparent;
}

.navlink:hover {
  cursor: pointer;
  color: #ffffff;
  border: primary;
  transition-duration: 500ms;
}
<div>
  <header class="nav-padding">
    <div>
      <nav>
        <div class="gssnav">
          GSS
        </div>
        <div class="navbar">
          <a href="index.html" class="navlink">Home</a>
          <a href="projects.html" class="navlink">Projects</a>
          <a onclick="smoothScrollTo('Links')" class="navlink">Links</a>
        </div>
      </nav>
    </div>
  </header>
</div>

推荐阅读