2

我正在尝试订购我的导航栏，以便顺序是导航，然后是按钮，然后是 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>

4

2 回答 2

1

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

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

HTML

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

CSS

.logo{
  order: 3;
 }

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

于 2020-09-28T01:57:09.467 回答
1

问题是它order适用于 flexbox parent 的直接子级。您正在尝试h1像这样设置元素的顺序，这会设置h1 其父元素内的顺序：

    h1{ order: 3; }

如果h1是 flexbox 元素的直接子元素，这将起作用header，正如您在此工作示例中使用您的代码看到的那样：

* {
  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>
  <h1>Loonieville</h1>
  <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>

但是，您的h1元素是元素的子a元素，而不是header：

<header><a href="/index.html"><h1>Loonieville</h1></a>...</header>

这意味着 CSS 正在尝试设置h1 其父元素内的顺序，即a.

您需要做的是在 flexbox父级的直接子级（order:3即a元素本身）上设置 CSS 。您可以通过多种方式做到这一点，例如

  • 给 a 元素一个类，就像你对 a 所做的那样cta，例如a.linkWithH1 { order: 3; }
  • 或者只是将此 CSS 应用于父级的第一个子级： header :first-child { order: 3; }

工作示例：

* {
  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%;
}

header :first-child {
  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>

于 2020-09-28T02:59:21.123 回答