如何将这两个元素并排

Question

我想让这两个元素或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 h4 ul {
list-style-type:none;
margin:0;
padding:0;
  overflow:hidden;
float:left;      
}

#social-list ul li {    
display:inline;
}

#social-list ul li a {
text-decoration:none;
padding:0.2em 1em 0.2em 1em;
}

#social-list ul li a img {
width:auto;
}

#btn{
display:inline;
}

Answer 1

在您的代码中添加此CSS。

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

Answer 2

默认情况下，

div是块元素。您必须将#social-list的显示设置为inline-block。

Answer 3

您可以根据自己的要求调整宽度。

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