【问题标题】:How to display HTML widgeds in line如何在行中显示 HTML 小部件
【发布时间】:2019-01-01 12:25:43
【问题描述】:

我正在尝试在我的网站上显示四个社交媒体 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="" />

【问题讨论】:

  • source1.com' style='border:无;最大宽度:234 像素;宽度:234 像素;' alt="" />
    source2.com '样式='边框:无;最大宽度:234px;宽度:234px;' alt="" />
    source3.com '样式='边框:无;最大宽度:234px;宽度:234px;' alt="" />

标签: html widget inline


【解决方案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>

【讨论】:

  • 此代码不完整。我的代码在评论部分。您能否将您的代码添加到我的代码中,因为我不知道在哪里添加它。我尝试了不同的选项,但它总是只显示堆叠的元素。
  • 没问题,如果是对的就把我标记为答案!
  • 没问题@Niclas,很高兴能够帮助你:)
猜你喜欢
  • 2020-06-30
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-05-17
  • 2018-11-27
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多