Question

我有一个Tabs标头组件，需要将最后两个项目放置在右侧。我的代码看起来像这样

li:nth-last-child(1),
  li:nth-last-child(2) {
    color: #c2c2c2;
    margin-left: auto;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 300;
}

最后一个项目（1）对齐到末尾，但第二个项目（2）放置在靠近容器中心的位置。有没有更好的方法可以使用这种方法解决此问题？

Answer 1

仅在margin-left: auto;上应用li:nth-last-child(2)。 margin-left: auto;将项目和随后的项目推到右侧。这是有关弹性和边距的快速article。

更新的代码：

li:nth-last-child(1),
li:nth-last-child(2) {
    color: #c2c2c2;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 300;
}

li:nth-last-child(2) {
    margin-left: auto;
}

将最后两个flex项目放在容器的末尾

1 个答案: