使用 CSS Grid 将最后一项固定在水平导航菜单的右侧

debugcn 发表于 Dev

布莱恩

我有一个水平导航，它将具有可变数量的链接。对于这个特定示例，我有 3 个，如下所示：

我希望第一个 2 保持在它们所在的位置，第三个一直定位到右侧。我能够弄清楚如何做到这一点的唯一方法是在链接上设置宽度，如下所示：grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));然后将以下内容添加到最后我想要的元素中：grid-column-end: -1;

那会起作用，但我不希望所有链接的宽度都相同。我希望将宽度设置为auto，但是我没有跨越整个宽度的隐式网格，因此似乎无法将第三个链接放在导航栏的最右侧。有没有一种相对简单的方法可以使用 CSS Grid 完成此任务？如果没有，我怎么能用 Flexbox 做到这一点？我想避免使用浮点数和绝对定位。

这是我目前使用的 CSS：

ul.nav {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: start;
  grid-gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

迈克尔·本杰明

使用 Grid，您需要一条规则，说明：“将所有列设置为不auto考虑数字，但将最后一列设置为1fr”。然后将最后一个网格项设置为margin-left: auto。

但是，我在当前的 Grid 规范（级别 1）中没有看到任何允许您将最后一列作为目标列数未知的内容。

据我所知，这不能用做grid-template-columns，grid-auto-columns或它们的组合。

然而，使用 flexbox 布局很简单。只需将最后一项设置为margin-left: auto.

网格布局

这就是它对一定数量的列的工作方式。

将前两列设置为auto，它使用内容长度。

将第三列设置为1fr，其中：

消耗线路上的所有可用空间，并且
将前两列固定在左侧。

然后使用auto边距将第三个链接（网格项）固定到右侧（在第三列的空间内）。

nav {
  display: grid;
  grid-template-columns: auto auto 1fr;
}

a:last-child {
  margin-left: auto;
}

/* demo styles */
nav { background-color: lightgray ; border: 1px solid gray; padding: 5px 0; }
a   { background-color: lightgreen; border: 1px solid gray; }

<nav>
  <a>Link 1</a>
  <a>Link 2</a>
  <a>Link 3</a>
</nav>

弹性布局

这就是它适用于确定或不确定数量的弹性项目的方式。

nav {
  display: flex;
}

a:last-child {
  margin-left: auto;
}

/* demo styles */
nav { background-color: lightgray ; border: 1px solid gray;  padding: 5px 0; }
a   { background-color: lightgreen; border: 1px solid gray; }

<nav>
  <a>Link 1</a>
  <a>Link 2</a>
  <a>Link 3</a>
</nav>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-07-18

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章