Question

我目前正在使用HTML / CSS（引导程序）进行一个简单的项目。很简单，我的任务是设计链接的样式以使其看起来像按钮，并使它们堆叠在移动视图中。

要求：按钮在常规/桌面视图上应并排放置，并且在iPhone / Android设备中应相互堆叠。

CodePen：https://codepen.io/anfperez/pen/joqoXG

这是我到目前为止的代码：

html

<a class="button-a" href="www.google">Link that looks like button</a>
<a class="button-b" href="www.amazon.com">Another link that looks like a button</a>

css（可以包含引导程序）

.button-a, .button-b {
  background-color: blue;
  color: white;
  text-decoration: none;
  padding: 10px;
}

.button-a {
  background-color: blue
}

.button-b {
  background-color: red;
}

当我尝试在移动视图中查看代码时，红色按钮按钮最终重叠在蓝色按钮之上，因为它们都是链接。如何获得红色按钮以清除蓝色按钮？在这种情况下，我不能使用Bootstrap的btn-group。

Answer 1

您可以在媒体查询中使用Flexbox来使用flex-direction: column堆叠元素。

.button-a, .button-b {
  background-color: blue;
  color: white;
  text-decoration: none;
  padding: 10px;
}

.button-a {
  background-color: blue
}

.button-b {
  background-color: red;
}

@media (max-width: 767px) {
  .wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
}

<div class="wrapper">
  <a class="button-a" href="www.google">Link that looks like button</a>
  <a class="button-b" href="www.amazon.com">Another link that looks like a button</a>
</div>

Answer 2

...真的吗？您可以使div具有行为，如果要它们堆叠，只需使按钮类具有内联块

.button-a, .button-b {
  background-color: blue;
  color: white;
  text-decoration: none;
  padding: 10px;
  margin: 20px;
  display:inline-block;
}

Edited Codepen 这使链接具有类似于div的边距和填充行为。您只需要设置宽度即可。因此，如果媒体画布较短，则链接将自动堆叠

Answer 3

.button-a, .button-b {
  background-color: blue;
  color: white;
  text-decoration: none;
  padding: 10px;
  margin: 20px;
  display:block;
}

.button-a {
  background-color: blue
}

.button-b {
  background-color: red;
}

HTML / CSS：获取链接样式类似于按钮的链接

3 个答案: