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

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具有行为，如果要它们堆叠，只需使按钮类具有inline-block

.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;
}