1
我正在嘗試爲我的頁腳設置3格1列表。左側的鏈接，我的社交媒體圖標上方中間的標題都居中，然後是右側的另一個鏈接，完全如圖所示。響應式設計3個div橫跨佈局與ul堆疊在下面的中心div
我設法與一些非常糟糕的代碼來實現這一目標。我甚至不會向你展示CSS。這不怎麼樣。
<div class="contentFoot">
<ul>
<li class="joinCommunity">Join our community</li>
<li class="leftFoot"><a class="contentFootLink" href="sign-up">Sign up for email updates</a></li>
<li>
<ul class="soc">
<li><a class="soc-twitter" href="#"></a></li>
<li><a class="soc-facebook" href="#"></a></li>
<li><a class="soc-google" href="#"></a></li>
<li><a class="soc-pinterest" href="#"></a></li>
<li><a class="soc-instagram soc-icon-last" href="#"></a></li>
</ul>
</li>
<a class="contentFootLink" href="feedback"><li class="rightFoot">Give us feedback about our website</li></a>
</ul>
</div>
我現在正在嘗試重寫以獲得響應式設計。這是我正在嘗試重寫我正在嘗試有div-inlineblock，div-inlineblock，div-block，div-inlineblock;所以它會被留下，中間堆放，正確。那麼當響應式設計足夠小時，就可以很容易地將所有東西都堆疊起來。
HTML：
<div class="contentFoot">
<div class="leftFoot">Sign up for email updates</div>
<div class="midFoot">Join our community</div>
<ul class="soc">
<li><a class="soc-twitter" href="#"></a></li>
<li><a class="soc-facebook" href="#"></a></li>
<li><a class="soc-google" href="#"></a></li>
<li><a class="soc-pinterest" href="#"></a></li>
<li><a class="soc-instagram soc-icon-last" href="#"></a></li>
</ul>
<div class="rightFoot">Give us feedback about our website</div>
</div>
CSS：
/************* footer ***************/
.contentFoot {
text-align:center;
width: 80%;
margin: 0 auto;
text-align: center;
}
.leftFoot,
.midFoot,
.rightFoot {
display: inline-block;
vertical-align:top;
width: 25%;
}
/***************Social Media****************/
@font-face {
font-family: 'si';
src: url('font/socicon.eot');
src: url('font/socicon.eot?#iefix') format('embedded-opentype'),
url('font/socicon.woff') format('woff'),
url('font/socicon.ttf') format('truetype'),
url('font/socicon.svg#icomoonregular') format('svg');
font-weight: normal;
font-style: normal;
font-family: 'Raleway', sans-serif;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family:si;
src: url(font/socicon.svg) format(svg);
}
}
.soc {
display: block;
list-style:none;
width: 20%;
clear: both;
}
.soc li {
display:inline-block;
*display:inline;
zoom:1;
}
.soc li a {
font-family:si!important;
font-style:normal;
font-weight:400;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
transition:.1s;
text-decoration:none;
text-align:center;
display:block;
position: relative;
width: 40px;
height: 40px;
line-height: 40px;
font-size: 22px;
color: #ffffff;
}
.soc a:hover {
z-index: 2;
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}
.soc-icon-last{
margin:0 !important;
}
.soc-twitter {
background-color: #4da7de;
}
.soc-twitter:before {
content:'a';
}
.soc-facebook {
background-color: #3e5b98;
}
.soc-facebook:before {
content:'b';
}
.soc-google {
background-color: #d93e2d;
}
.soc-google:before {
content:'c';
}
.soc-pinterest {
background-color: #c92619;
}
.soc-pinterest:before {
content:'d';
}
.soc-instagram {
background-color: #9c7c6e;
}
.soc-instagram:before {
content:'x';
}
編輯：設置.soc包括保證金：0汽車;把它放在適當的位置，但其他一切仍然不一致。