html - 如何使这两个元素并排

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
}