时间戳

首页 > 解决方案 > 导航栏的 Flex 顺序不正确

html - 导航栏的 Flex 顺序不正确

问题描述

我正在尝试订购我的导航栏，以便顺序是导航，然后是按钮，然后是 h1。我在这里关注一个教程，它是 youtuber 提供的第三个选项。h1 应该一直推到右侧。出于某种原因，弹性订单将无法在标题中工作并以正确的方式对齐。

这应该是这样的： 这就是它应该的样子

*{
  box-sizing: border-box;
  padding:0;
  margin:0;
}

body{
  background-color: rgb(54, 54, 54);
  font-family: sans-serif;
  color: white;
}

li, a, button{
  font-weight: 500;
  font-size: 16px;
  font-family: sans-serif;
  color: rgb(255, 255, 255);
  text-decoration: none;
}

header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 15vh;
  padding: 30px 10%;
}

h1{
  cursor: pointer;
  margin-left: auto;
  order: 3;
}
nav{
  order: 1;
}

ul{
  list-style: none;
}

ul li{
  display: inline-block;
  padding: 0 20px;
}

ul li a{
  transition: all 0.3s ease;
}

ul li a:hover{
  color: pink;
}

.cta{
  order: 2;
}

button{
  padding: 9px 25px;
  background-color: white;
  color: rgb(54, 54, 54);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
}

button:hover{
  background-color: pink;
  color: white;
}
<header>
  <a href="/index.html"><h1>Loonieville</h1></a>
  <nav>
      <ul class='navlinks'>
          <li><a href="/">Main St</a></li>
          <li><a href="/">Town Hall</a></li>
          <li><a href="/">Downtown</a></li>
      </ul>
  </nav>
  <a href="" class='cta'><button>
      Contact
  </button></a>
</header>

标签： htmlcssflexbox

解决方案

您使用 h1 选择器来订购 h1，但 h1 元素不是弹性项目。只有弹性容器的直接子级是弹性项目。在这种情况下， h1 元素不是弹性项目，而是包裹在它周围的锚标记。

选择具有某个类的 a 标签，然后对其进行排序。像这样，

HTML

 <a href="#" class="logo"><h1>Loonieville</h1></a>

CSS

.logo{
  order: 3;
 }

建议：如果您想单独设置弹性项目的样式，请给它们单独的类。

推荐阅读