Рассматривайте изображение и ссылку как один элемент - PullRequest
Новая
       3

Рассматривайте изображение и ссылку как один элемент

0 голосов
/ 29 марта 2019

Я делаю адаптивный сайт.Внизу у меня есть значок телефона, номер телефона, значок почты и почтовый адрес - все в одной строке. 

<img src="https://cdn.pixabay.com/photo/2013/07/13/10/30/icon-157358_960_720.png" height="150px" width="111px">
<a href="tel:123456">123456</a>
<img src="https://cdn.pixabay.com/photo/2016/06/13/17/30/mail-1454734_960_720.png" height="150px" width="150px">
<a href="mailto:asdf@gmail.com">asdf@gmail.com</a>

В полном окне это выглядит так:[phone img] [номер телефона] [mail img] [почтовый адрес]

Когда я изменяю размер окна, они заканчиваются так:[phone img] [номер телефона] [mail img][почтовый адрес]

Я хочу, чтобы значки и тексты слипались, вот так:[phone img] [номер телефона][mail img] [mail address]

Я пытался заключить их в div и span, но ничего не получалось.Я также погуглил "html два элемента слипаются" безрезультатно.Это действительно просто, и я чувствую себя довольно глупо, но я не могу понять это.

Ответы [ 2 ]

0 голосов
/ 29 марта 2019

Что вы можете сделать, это сделать оба элемента частью неупорядоченного списка и отобразить его как два отдельных блока на мобильном устройстве.Когда область просмотра увеличивается (@media screen and (min-width: 600px)), элементы списка (<li>) будут отображаться рядом друг с другом, благодаря display: inline-block;. 

  ul {
  list-style: none;
}

@media screen and (min-width: 600px) {
  li {
    display: inline-block;
    padding: 0 10px;
  }
<ul>
  <li><img src="phone.jpg">
    <a href="tel:123456">123456</a></li>
  <li><img src="mail.jpg">
    <a href="mailto:asdf@gmail.com">asdf@gmail.com</a></li>
</ul>
0 голосов
/ 29 марта 2019

Как насчет этого: 

<a href="tel:123456">
    <img src="phone.jpg">123456
</a>

<a href="mailto:asdf@gmail.com">
    <img src="mail.jpg">asdf@gmail.com</a>

использовать css для добавления отступов и адаптивного поведения

...