锚标记破坏 flexbox 命令（HTML 和 CSS）答案

【问题标题】：Anchor tag disrupting flexbox command (HTML & CSS)锚标记破坏 flexbox 命令（HTML 和 CSS）
【发布时间】：2020-01-21 07:24:39
【问题描述】：

我正在尝试使用 flexbox (justify-content: space-between;) 将摩托罗拉徽标推到左侧，将红色块（导航栏）推到右侧。只要不涉及锚标签，它实际上就可以很好地工作。但是，我需要锚标记，以便访问者可以实际单击导航栏的每个项目并访问网站的相应部分。如何在不删除锚标签的情况下使 justify-content 工作？

HTML

<div id="header">
  <img id="header-img" src="https://upload.wikimedia.org/wikipedia/commons/2/22/Motorola_Logo_White.png" alt="This is Motorolas Logo">
  <div id="nav-bar">
    <div id="nav1" class="nav-link"><a href="#prices">Prices</div>
    <div id="nav2" class="nav-link"><a href="#prices">Specs</div>
    <div id="nav3" class="nav-link"><a href="#prices">Reviews</div>
  </div> 
</div>

CSS

#header {
  background-color: gray;
  position: fixed;
  justify-content: space-between;
  z-index: 1;
  display: flex;
  width: 100%;
  height: 4rem;
}

#header-img {
  background-color: orange;
  height: 4rem;
  width: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#nav-bar {
  background-color: red;
  width: 25%;
  height: 4rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

你可以在Codepen看到它

【问题讨论】：

在最后正确关闭你的锚 --> </a>
你应该关闭<a href="#prices">Prices</a>标签。
谢谢！我认为锚标签就像 img 标签一样工作，你不必关闭它......

标签： html css flexbox anchor href

【解决方案1】：

如果您有一个包含左对齐内容的 flex 容器 - 除了您想要右对齐的一个或多个项目之外，还有一个使用 margin 属性的快捷方式。

如果您将以下规则添加到现有样式中：

#nav-bar {
    margin-left: auto; /* Pushes the element right inside a flex container */
}

它应该可以按您的意愿工作。您甚至可以从 #header 选择器中删除 justify-content: space-between; 规则。

【讨论】：