Question

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

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

Answer 1

您可以尝试使用列表。如果您不想使用CSS，但对内联样式感到满意，我建议您使用list-style：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>

如何使Rails图像标签垂直显示

1 个答案: