时间戳

首页 > 解决方案 > 如何在html中并排放置两个徽章

javascript - 如何在html中并排放置两个徽章

问题描述

这是我的 fb 和linkedin 徽章的代码，我希望它们并排出现。


<div class="LI-profile-badge"  data-version="v1" data-size="medium" 
data-locale="en_US" data-type="vertical" data-theme="dark" data-vanity="anshul-rai-20a450171">
<a class="LI-simple-link" href='https://in.linkedin.com/in/anshul-rai-20a450171?trk=profile-badge'>Anshul Rai</a>
</div>
<br>
<div class="fb-page" data-href="https://www.facebook.com/auralshin/" 
data-tabs="timeline" data-width="" data-height="" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false">
   <blockquote cite="https://www.facebook.com/auralshin/" class="fb-xfbml-parse-ignore">
    <a href="https://www.facebook.com/auralshin/">Auralshin</a>
   </blockquote>
</div>

我希望两个徽章平行且并排出现

标签： javascripthtmlcss

解决方案

一般来说，如果您提出有关如何做某事的问题，而不是仅仅提供 HTML 块并（基本上）要求其他人为您解决问题，我认为您在 Stack Overflow 上会更成功。

以这种方式提出您的问题，它们是使元素“浮动”彼此相邻的几种方法：

  • 使它们都具有float: left（或right）的样式，而没有clear
  • 将其display财产更改为inline或inline-block
  • 使用绝对定位 ( position: absolute) 和leftandtop属性将它们彼此相邻定位
  • 使它们成为 flexbox 元素中的两个 flexbox 项目（请参阅https://css-tricks.com/snippets/css/a-guide-to-flexbox/以很好地解释 flexbox 的工作原理）

您必须确定应该为您的具体情况使用哪一个。

推荐阅读