如何在行中显示 HTML 小部件

Question

我正在尝试在我的网站上显示四个社交媒体 HTML 小部件。 我尝试了一些代码，但没有一个有效。你能给我一些建议吗？

这是我的代码：

https://www.link3.com' target='_center' title='Title1'>https://www.source3.com' 样式='边框：无；最大宽度：234px；宽度：234px；' alt="" />https://www.link4.com' target='_center' title='Title1'>https://www.source4.com' 样式='边框：无；最大宽度：234px；宽度：234px；' alt="" />

Answer 1

您可以使用 CSS 来做到这一点，可以是内联的，如下所示，也可以在样式表等中。

尝试使用display: inline-block;

<div style="display:inline-block;border:none;max-width:234px;width:234px;">
  https://www.source1.com
</div>

<div style="display:inline-block;border:none;max-width:234px;width:234px;">
  https://www.source2.com
</div>

<div style="display:inline-block;border:none;max-width:234px;width:234px;">
  https://www.source3.com
</div>

<div style="display:inline-block;border:none;max-width:234px;width:234px;">
  https://www.source4.com
</div>

看这里：https://www.w3schools.com/css/css_inline-block.asp

你也可以使用浮点数：https://www.w3schools.com/cssref/pr_class_float.asp

<div style="float:left;border:none;max-width:234px;width:234px;">
  https://www.source4.com
</div>

div {
  background:black;
  width:234px;
  max-width:234px;
  border:none;
  display:inline-block;
}

<div>
  https://www.source1.com
</div>

<div>
  https://www.source2.com
</div>

<div>
  https://www.source3.com
</div>

<div>
  https://www.source4.com
</div>

<div style="display:inline-block;border:none;max-width:234px;width:234px;">
    <a href='link1.com' target='_center' title='Title1'>
      <img src='source1.com' style='border:none;max-width:234px;width:234px;' alt="" />
    </a>
</div>
<div style="display:inline-block;border:none;max-width:234px;width:234px;">
    <a href='link2.com' target='_center' title='Title1'>
      <img src='source2.com' style='border:none;max-width:234px;width:234px;' alt="" />
    </a>
</div>
<div style="display:inline-block;border:none;max-width:234px;width:234px;">
    <a href='link3.com' target='_center' title='Title1'>
      <img src='source3.com' style='border:none;max-width:234px;width:234px;' alt="" />
    </a>
</div>