html - 如何添加 HTML 水平小时线

Question

我想在按钮下方添加一条水平线作为分隔符。网页缩放时如何用hr添加一条不缩放的线(图中红线)？

页面上的元素居中。像这样:

红线是后来加的。

谢谢

[class^="item"] {
  color: white;
  text-align: center;
  font-size: 21px;
  background-color: blue;
  height: fit-content;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 100px);
  grid-template-areas: "title title img" "buttons buttons img" "main main img" "main main other1";
  padding: 12px;
  grid-gap: 10px;
  padding-left: 90px;
  padding-right: 90px;
  margin: 0 auto;
  max-width: 1300px;
  min-width: 1300px;
  justify-content: center;
}

.item1 {
  grid-area: title;
  font-size: 31px;
  height: 50%;
  height: fit-content;
  padding: 10px;
}

.item2 {
  grid-area: img;
}

.item3 {
  grid-area: buttons;
  transform: translateY(-50px);
}

.item4 {
  grid-area: main;
  transform: translateY(calc(-86px + 40px));
}

.item5 {
  grid-area: other1;
  transform: translateY(-65px);
}

<div class="grid">
  <div class="item1">1 Fallout</div>
  <div class="item2">2
    <img src="../../Img/Game Covers/Fallout1Cover.bmp" width="165" height="241">
  </div>
  <div class="item3">3
    <a href="fallout1Characters.html"><button style="height: 50px; width: 120px">Characters</button></a>
    <a href="fallout1Locations.html"><button style="height: 50px; width: 120px">Locations</button></a>
    <a href="fallout1Items.html"><button style="height: 50px; width: 120px">Items</button></a>
    <button style="height: 50px; width: 120px">4</button>
  </div>
  <div class="item4">4 Fallout: A Post Nuclear Role Playing Game is an open-world turn-based role-playing video game developed and published by Interplay Productions in 1997. The game has a post-apocalyptic and retro-futuristic setting, in the aftermath of a global nuclear
    war in an alternate history timeline mid-22nd century. The protagonist of Fallout is an inhabitant of a Vault, long-term shelters, who is tasked to find a replacement Water Chip and save their Vault.
  </div>
  <div class="item5">ttt</div>
</div>

Answer 1

1.在类名为'item3'的div中添加如下所示的hr标签

<div class="item3">3
                <a href="fallout1Characters.html"><button style="height: 50px; width: 120px">Characters</button></a>
                <a href="fallout1Locations.html"><button style="height: 50px; width: 120px">Locations</button></a>
                <a href="fallout1Items.html"><button style="height: 50px; width: 120px">Items</button></a>
                <button style="height: 50px; width: 120px">4</button>

                <hr class="spacer">

            </div>

2.在css下方添加

.spacer{
    position: absolute;
    bottom: -33px;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: red;
}

3.添加相对于类.item3的位置