时间戳

首页 > 解决方案 > 如何让rails图像标签垂直显示

html - 如何让rails图像标签垂直显示

问题描述

我正在尝试使用我拥有的图标在我的网站中添加社交媒体链接。我已经显示了图像，并且可以单击它们以打开相应网站的新标签。但是，它们彼此相邻地水平显示，可以这么说，我希望它们出现在列表中。我尝试过使用标签，以及将它们放在自己的文章、段落中，我所做的一切似乎都不起作用。任何帮助，将不胜感激。这是我到目前为止的代码

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

标签： htmlruby-on-rails

解决方案

您可以尝试使用列表。如果您不想使用 css 但对内联样式感到满意，我建议您在 ul 元素上使用 list-style: none 来删除项目符号。

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

推荐阅读