如何添加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。在div内添加一个hr标签，其类名为“ item3”

<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.add在CSS之下

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

3.add相对于.item3类的位置

Answer 2

起初有一些不同的方法，您可以在视图中设置小时数，并借助css transform的旋转

另一方面，您可以在hr之类的项目旁边设置边框并为其设置空间