将多个 div 布局从垂直更改为水平
Change multiple divs layout from vertical to horizontal
我正在尝试创建一个页脚,其中左侧、中间和右侧都有文本。到目前为止,我已经这样做了,但问题是中心的 div 垂直堆叠而不是水平堆叠。我尝试将 float:left 应用于有效的 .entypo 元素,但它会将所有元素移动到 .footerslinks-left 旁边,而不是留在中间。
所以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;
}
div 的默认 display
属性 是 block
,扩展到 100% 宽度。
试试:
.footersocial-center div {
display: inline;
}
@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;
}
<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>
我正在尝试创建一个页脚,其中左侧、中间和右侧都有文本。到目前为止,我已经这样做了,但问题是中心的 div 垂直堆叠而不是水平堆叠。我尝试将 float:left 应用于有效的 .entypo 元素,但它会将所有元素移动到 .footerslinks-left 旁边,而不是留在中间。
所以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;
}
div 的默认 display
属性 是 block
,扩展到 100% 宽度。
试试:
.footersocial-center div {
display: inline;
}
@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;
}
<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>