将多个div布局从垂直更改为水平

Question

我正在尝试创建一个页脚，左侧，中间和右侧都有文本。到目前为止，我已经做到了这一点，但问题是中心的div是垂直堆叠而不是水平堆叠。我尝试将float：left应用于.entypo元素，但它会将所有元素移到.footerslinks-left旁边，而不是留在中心。

http://jsfiddle.net/8uL2e4bw/

所以HTML如下：

<footer> 


<div class="topfooter">

<ul class="footerlinks-left">
<li><a href="index.html">Home</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>



<div class="footeraddress-right">

<p>Address</p>
<p>11 Name Road</p>
<p>TE5 7IN</p>
<p>City</p>
<p>Postcode</p> 

<div class="entypo-phone">01234567890</div>
<div class="entypo-mail">hello@salon.com</div>

</div>

<div class="footersocial-center">
<div class="entypo-facebook-circled"> </div>
<div class="entypo-twitter-circled"> </div>
<div class="entypo-gplus-circled"> </div>
</div>

</div>


</footer>

是的我知道代码不是最整洁的，我应该先解决这个问题，以避免不必要的并发症！

CSS：

footer {

text-align: left;
padding: 10px;
background-color: black;
color: #da82da;
}

.topfooter {

margin: 10px auto;
max-width: 720px;

}


.footerlinks-left, .footerlinks-left a {

float: left;

color: #da82da;
list-style: none;
text-decoration: none;
margin-left: 20px;

}

.footersocial-center {


font-family: 'entypo';
font-size: 30px;
overflow:hidden;
text-align:center;

}



.footeraddress-right {

 float: right;

}

.footeraddress-right p {
margin: 0;
padding: 2px;
}


.entypo-phone, .entypo-mail {

  font-family: 'entypo', sans-serif;
padding: 2px;
}

Answer 1

div的默认display属性为block，扩展为100％宽度。

尝试：

.footersocial-center div {
    display: inline;
}

＆＃13;

＆＃13;

@import url(http://weloveiconfonts.com/api/?family=entypo);

footer {

text-align: left;
padding: 10px;
background-color: black;
color: #da82da;
}

.topfooter {

margin: 10px auto;
max-width: 720px;

}

.footerlinks-left, .footerlinks-left a {

float: left;
 
color: #da82da;
list-style: none;
text-decoration: none;
margin-left: 20px;

}

.footersocial-center {

font-family: 'entypo';
font-size: 30px;
overflow:hidden;
text-align:center;

}


.footeraddress-right {

 float: right;

}

.footeraddress-right p {
margin: 0;
padding: 2px;
}

.entypo-phone, .entypo-mail {

font-family: 'entypo', sans-serif;
padding: 2px;
    
}

.footersocial-center div{
display: inline;
}

＆＃13;

<footer> 



<div class="topfooter">

<ul class="footerlinks-left">
<li><a href="index.html">Home</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>



<div class="footeraddress-right">

<p>Address</p>
<p>11 Name Road</p>
<p>TE5 7IN</p>
<p>City</p>
<p>Postcode</p> 

<div class="entypo-phone">01234567890</div>
<div class="entypo-mail">hello@salon.com</div>

</div>

<div class="footersocial-center">
<div class="entypo-facebook-circled"> </div>
<div class="entypo-twitter-circled"> </div>
<div class="entypo-gplus-circled"> </div>
 </div>

</div>



</footer>

＆＃13;

＆＃13;

＆＃13;