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