css 依次排列两个元素

Question

如何让小屏幕的两个link一个接一个显示。现在这两个 link 是左和右。但我想要那些 link 一个在上面，另一个在底部。

<div className="homeContent">
                <div className="content">
                    <h1>Text</h1>
                    <div className="pdf">
                        <a href="./media/XX.pdf" download="XX.pdf">XX Download</a>
                        <a href="./media/BB.pdf" download="BB.pdf">BB Download</a>
                    </div>
                </div>
            </div>

@media screen and (max-width:580px){
  .homeContent {
    h1 {
      font-size: 3rem !important;
    }
    .content {
      .pdf {
        a {
          // one after another
        }
      }
    }
  }
}

Answer 1

在 a 上添加 display:block 会做你想做的，就像这样（我使用 css 以便它在这里工作）：

@media screen and (max-width: 580px) {
  a {
    display: block;
  }
}

<div className="homeContent">
  <div className="content">
    <h1>Text</h1>
    <div className="pdf">
      <a href="./media/XX.pdf" download="XX.pdf">XX Download</a>
      <a href="./media/BB.pdf" download="BB.pdf">BB Download</a>
    </div>
  </div>
</div>

css 依次排列两个元素

css arrange two elements one after another

html

css

sass