Как сделать так, чтобы метки рельсов отображались вертикально - PullRequest
0 голосов
/ 19 декабря 2018

Я пытаюсь добавить ссылки на социальные сети на свой сайт, используя иконки, которые у меня есть.У меня есть изображения, отображаемые, а также кликабельные для открытия новой вкладки на соответствующем веб-сайте.Тем не менее, они отображаются горизонтально рядом друг с другом, и я бы хотел, чтобы они были в списке, так сказать.Я пытался использовать тег, а также помещал их в свои статьи, абзацы, ничего, что я делаю, похоже не работаетлюбая помощь будет оценена.Вот код, который у меня есть до сих пор

<body>
  <div>
    <a href="https://twitter.com/tavernsavepoint" target= "_blank">
      <%= image_tag("Twitter icon.png", display: 'inline-block', style: 'margin-top: 30px;') %>
    </a>
  </div>
</body>

<body>
  <div>
    <a href="https://www.facebook.com/tavernsavepoint/" target= "_blank">
      <%= image_tag("facebook icon.png", display: 'inline-block', style: 'margin-top: 30px;') %>
    </a>
  </div>
</body>

<body>
  <div>
    <a href="https://www.facebook.com/tavernsavepoint/" target= "_blank">
      <%= image_tag("facebook icon.png", display: 'inline-block', style: 'margin-top: 30px;') %>
    </a>
  </div>
</body>

1 Ответ

0 голосов
/ 19 декабря 2018

Вы можете попробовать использовать список.Если вы не хотите использовать css, но довольны встроенными стилями, я бы порекомендовал стиль списка: ни один в элементе ul для удаления маркеров.

 <ul style="list-style:none;">
  <li>
    <a href="https://twitter.com/tavernsavepoint" target= "_blank">
      <%= image_tag("Twitter icon.png", display: 'inline-block', style: 'margin-top: 30px;') %>
    </a>
  </li>
  <li>
    <a href="https://www.facebook.com/tavernsavepoint/" target= "_blank">
      <%= image_tag("facebook icon.png", display: 'inline-block', style: 'margin-top: 30px;') %>
    </a>
  </li>
  <li>
    <a href="https://www.facebook.com/tavernsavepoint/" target= "_blank">
      <%= image_tag("facebook icon.png", display: 'inline-block', style: 'margin-top: 30px;') %>
    </a>
  </li>
</ul>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...