如何仅将 css 网格中的一项向右对齐？

Question

 div {
      display:grid;
      grid-template-columns: repeat(2,1fr);
      width: 300px;
      background-color: lightyellow;
    }

    .left {
      grid-column: 1/2;
      visibility: hidden;
    }
    .left:before {
    content: "<";
    visibility: visible;
    width: 50px;
    }

    .right {
      grid-column: 2/3;
      visibility: hidden;
    }
    .right:before {
    content: "<";
    visibility: visible;
    width: 50px;
    }

    <div>
      <a class="left" href="#"> Left </a>
      <a class="right" href="#"> Right </a>
    </div>

如何使 .right 位于网格右侧？ 所以像这样。我不能在 text-align: right; 元素上使用 :before，因为它没有任何作用。

Answer 1

您只需要添加text-align: right;

div {
  display:grid;
  grid-template-columns: repeat(2,1fr);
  width: 300px;
}

.left {
  grid-column: 1/2;
}

.right {
  grid-column: 2/3;
  text-align: right;
  background-color: red;
}

<div>
  <a class="left" href="#"> Left </a>
  <a class="right" href="#"> Right </a>
</div>

Answer 2

使用 after 表示右箭头：

div {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 300px;
  background-color: lightyellow;
}

.left {
  grid-column: 1/2;
  visibility: hidden;
}

.left:before {
  content: "<";
  visibility: visible;
}

.right {
  grid-column: 2/3;
  visibility: hidden;
  text-align:right;
}

.right:after {
  content: ">";
  visibility: visible;
}

<div>
  <a class="left" href="#"> Left </a>
  <a class="right" href="#"> Right </a>
</div>

Answer 3

考虑使用 Flexbox 然后 align-self :)

也很容易理解逻辑： https://flexboxfroggy.com/