Question

我正在尝试将徽标之外的所有导航链接与容器/导航的右侧对齐。我想在两侧保持1rem的边距，以便使内容具有一定的呼吸空间。

我尝试使用下面的代码，但页面上没有任何更改：

.menu:not(:first-child){
  text-align: right;
}

<body>
  <div class="body-wrap">
    <header class="header">
      <nav role="navigation">
        <ul class="menu">
          <li class="home-link"><a href="#"><img src="https://www.nicolefenton.com/_/images/dec/circle-menu.svg" height="12" width="12" alt=""></a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Writing</a></li>
          <li><a href="#">Speaking</a></li>
          <li><a href="#">Projects</a></li>
        </ul>
      </nav>
    </header>
  </div>
</body>

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

body {
  position: relative;
  line-height: 1.5em;
  min-width: 320px;
  margin: 0 auto;
  color: #222222;
  border: 30px solid #ffffff;
  background-color: #f8f7f3;
}

.body-wrap {
  display: flex;
  min-height: 100vh;
  display: box;
}

.header {
  width: 100%;
  max-width: 960px;
  margin-right: 1rem;
  margin-left: 1rem;
}

.menu {
  display: flex;
  position: absolute;
  top: -0.83rem;
  width: 100%;
  max-width: 960px;
}

.menu:not(:first-child){
  text-align: right;
}

li {
  flex-grow: 1;
  position: relative;
  margin-right: 1em;
  display: inline-block;
}

使用:not(:first-child) selector.

时，我希望所有的导航链接都向右对齐

Answer 1

此：

.menu:not(:first-child)

选择不是第一个孩子的班级菜单项。

您想要的是：

.menu :not(:first-child)

在.menu类中选择非第一子元素。

注意空格。

或更妙的是，使您的意思更明显：

.menu li:not(:first-child)

Answer 2

如果您只想将文本向右对齐，则可能只需要更改为此。

.menu li:not(:first-child){
  text-align: right;
}

除了第一个孩子，将所有文本右对齐

2 个答案: