如何以行方式显示HTML widgeds
如何以行方式显示HTML widgeds
提问于 2018-07-25 03:19:59
我正在尝试在我的网站上显示四个社交媒体HTML小部件。我尝试了几个代码，但都不起作用。你能给我一些建议吗？
下面是我的代码：
https://www.link3.com‘target='_center’title='Title1'>https://www.source3.com‘style='border:none;max-width:234px;width:234px;’alt="“/>https://www.link4.com‘target='_center’title='Title1'>https://www.source4.com‘style='border:none;max-width:234px;width:234px;’alt="”/>
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-25 03:23:01
你可以用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
您还可以使用floats：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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51506105
复制相关文章
相似问题