Html 如何使这两个元素并排

我想让这两个元素或div相邻对齐。目前这是网站。www.toppertv.org*（第二部分在我找出代码之前是隐藏的）

代码如下：

<div id="social-list" class="text-center">
<h4><b> Connect With us</b></h4>
<ul>
   <li><a href="https://www.facebook.com/TopperTV13" >                                
      <img src="img/facebook-small.png" >
</a></li>
   <li><a href="https://twitter.com/topper_tv" >                            
      <img src="img/twitter-small.png" >
</a></li>                   
   <li><a href="instagram.com/toppertv" >                              
     <img src="img/instagram-small.png" >
</a></li>               
</ul>
</div>

<div id="btn" class="text-center"><a href="https://www.smartrecruiters.com/toppertv" >                  

<h4>Apply Now</h4>
</a></div>

---

在代码中添加此CSS

#social-list,
#btn {
  float: left
}

---

默认情况下，

div

s是块元素。您必须将

#社交列表

的显示设置为，

内联块

您可以根据需要调整宽度

#social-list
{
    width: 600px;  
    float: left;
}
#btn
{
    width: 300px;  
    float: left;
}

---

如果你不太喜欢旧的网页（即IE和其他非常青浏览器），更好的方法是使用[flexbox]（css tricks.com/snippets/css/a-guide-to-flexbox/）进行布局。

#social-list
{
    width: 600px;  
    float: left;
}
#btn
{
    width: 300px;  
    float: left;
}