如何添加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的位置

Answer 2

首先有一些不同的方法，你可以在你的视图中设置一个hr，然后在css transform的帮助下旋转它

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