HTML / CSS: оформление ссылок в виде кнопок в стеке - PullRequest
Новая
       15

HTML / CSS: оформление ссылок в виде кнопок в стеке

1 голос
/ 11 мая 2019

В настоящее время я работаю над простым проектом в HTML / CSS (Bootstrap).Очень просто, у меня есть задача оформить ссылки, чтобы они выглядели как кнопки, и заставить их складываться в мобильном представлении.

Требования: кнопки должны быть расположены рядом друг с другом при обычном / настольном просмотре и должны накладываться друг на друга на устройствах 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 (Bootstrap может быть включен) 

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

.button-a {
  background-color: blue
}

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

Когда я пытаюсь просмотреть код вна мобильном экране красная кнопка в конце перекрывается сверху синей кнопки, так как они обе ссылки.Как я могу получить красную кнопку, чтобы очистить синюю кнопку?В этом случае я не могу использовать btn-группу Bootstrap.

Ответы [ 3 ]

0 голосов
/ 11 мая 2019

.... на самом деле?Вы можете настроить поведение div, если хотите, чтобы они складывались, просто сделайте класс кнопки, имеющий встроенный блок 

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

Отредактированный Codepen Это делает ссылку на поляхи поведение заполнения, как div.Вам просто нужно установить ширину. Так что, если медиа-холст короче, ссылка будет автоматически складываться

0 голосов
/ 11 мая 2019 
.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;
}
0 голосов
/ 11 мая 2019

Вы можете использовать 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>
...