如何让我的超链接位于导航的右侧，徽标位于左侧？

Question

我不明白如何处理我的 CSS 代码，以便将导航中的超链接移至右侧。

HTML代码：

CSS代码：

我尝试过使用“float”并删除了flex-container，但我什至无法使用带有徽标的文本，它看起来像这样：

PS。抱歉，代码屏幕（编辑器只是不允许我在这里发布代码）。

我做错了什么？

Answer 1

借助 Flexbox 的魔力，您可以轻松实现这一点：

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
  
  header nav ul {
    list-style-type: none;
    display: flex;
    gap: 1rem;
  }

<html>
  <head></head>
  <body>
    <header>
      <img src="https://picsum.photos/120">
      <nav>
        <ul>
          <li><a href="#">Some URL</a></li>
          <li><a href="#">Some URL</a></li>
          <li><a href="#">Some URL</a></li>
         </ul>
      </nav>
    </header>
  </body>
 </html>

通过将 header 元素设置为 Flex 容器，所有子元素都充当 Flex 容器的元素，并对其父元素的 Flex 设置做出反应。因此，在这种情况下，图像元素是一个弹性元素，而导航元素是另一个。现在，当您在两个元素上使用 justify-content: space- Between 时，它们将尝试双向到达边缘（向左和向右），因为 flex-container 尝试在元素之间放置所有可用空间。由于只有两个元素共享可用空间，因此整个空间位于它们之间，从而产生您想要的导航栏。

如何让我的超链接位于导航的右侧，徽标位于左侧？

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

1个回答

最新问题

如何让我的超链接位于导航的右侧，徽标位于左侧？

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

1个回答

最新问题

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