html - 页脚对齐

Question

我正在尝试对齐页脚中的元素，但我似乎做不到。

我想做的是在顶部添加地址，例如主页等

在我试图在同一行右侧添加隐私、法律等共享按钮的下方。

下面是我的版权，居中在底部的中间。

我几乎可以做到，但不完全是。

我试图让页脚包含 3 行。顶部包含主页、博客等站点链接，中间包含法律免责声明等链接，但在右上角，我希望社交图标和最后一行包含版权信息。

这是我的 fiddle

footer {
    margin-top: 200px;
    height:20%;
    width: 100%;
    background-color:#fff;
}
#connect, #links-add {
    display:inline-block;
    height:20%;
    vertical-align:top;
}
#links-add {
    width:20%;
}
#links-add p {
    margin-left:50px;
    color:#000000;
    text-align:left;
    display:inline-block;
    vertical-align:top;
    font-size:20px;
    font-family:'arial';
    margin-bottom:50px;
}
#connect.social-icons h3 {
    color:#000000;
    text-align:left;
    position:relative;
    display:inline-block;
    vertical-align:top;
    font-size:14px;
    font-family:'arial';
    margin-bottom: 20px;
}
#links-add .links-footer {
    clear: both;
    margin-left:50px;
    vertical-align:top;
    display:inline;
}
#links-add .links-footer li, .links-footer li a {
    display:inline-block;
    text-align:left;
    margin-top:20px;
    padding-right:40px;
    vertical-align:top;
    color: #000000;
    font-size: 14px;
}
.links-footer li a:hover {
    zoom: 1;
    filter: alpha(opacity=75);
    opacity: 0.7;
    -webkit-transition: opacity .15s ease-in-out;
    -moz-transition: opacity .15s ease-in-out;
    -ms-transition: opacity .15s ease-in-out;
    -o-transition: opacity .15s ease-in-out;
    transition: opacity .15s ease-in-out;
}
#connect .social {
    max-width:15%;
    vertical-align:bottom;
    display:inline;
    white-space:nowrap;
    position:relative;
}
#connect .social li {
    display:inline-block;
    width:40px;
}
#connect .social li a {
    display:inline-block;
    margin-top:2px;
    width:34px;
    height:34px;
}
.copy-right {
    margin-top:20px;
    margin-left: 100px;
    margin-right: 100px;
    text-align:center;
    vertical-align: bottom;
}
.copy-right a {
    color: #000000;
    transition:0.3s all;
    -webkit-transition:0.3s all;
    -moz-transition:0.3s all;
    -o-transition:0.3s all;
}
.copy-right a:hover {
    color:#0000ff;
}
.social {
    display:inline;
    margin-bottom:0px;
}
.social li a.facebook {
    background:url('http://lorempixel.com/output/technics-q-c-72-72-7.jpg') no-repeat;
}
.social li a.twitter {
    background: url('http://lorempixel.com/output/technics-q-c-72-72-7.jpg') no-repeat;
}

<footer>
    <div id="links-add"> <a href="index.html">Home</a> 
    </div>
    <div id="links-add"> <a href="index.html">Home</a> 
    </div>
    <div id="links-add"> <a href="index.html">Home</a> 
    </div>
    <div id="links-add"> <a href="index.html">Home</a> 
    </div>
    <div id="links-footer">
        <li><a href="#">FAQ</a>
        </li>
    </div>
    <li><a href="#">FAQ</a>
    </li>
    </div>
    <li><a href="#">FAQ</a>
    </li>
    </div>
    <li><a href="#">FAQ</a>
    </li>
    </div>
    <div id="connect">
         <h3>Chat with us</h3> 
        <ul class="social">
            <li><a class="facebook" href="#"> </a>

            </li>
            <li><a class="twitter" href="#"><img src=""> </a>

            </li>
        </ul>
    </div>
    <p class="copy-right">Website by Thor<a href="#">copyright info</a> &nbsp; &copy 2015</a>
    </p>
</footer>

Answer 1

根据您的需要安排。红色边框用于突出显示。!CSS

footer{
margin-top: 200px;
width: 100%;
background-color:#ddd;
border:1px solid red;
}
.row-2{border:1px solid red}
.row-1 li{display:inline-block}
.legal{float:left;}
.social{float:right;}
.legal li, .social li{display:inline-block;border:1px solid red}
.smm{border:1px solid red;}
.copy-right{text-align:center}

HTML

<footer>
<ul class="row-1">
    <li><a href="index.html">Home</a></li>
    <li><a href="index.html">Home</a></li> 
    <li><a href="index.html">Home</a></li> 
    <li><a href="index.html">Home</a></li> 
</ul> 
<div class="row-2">
    <ul class="legal">
    <li><a href="#">FAQ</a></li>
    <li><a href="#">Privacy Policy</a></li>
    <li><a href="#">Terms and Conditions</a></li>
    <li><a href="#">legal</a></li>
</ul>

<div class="social">    
 <h3>Chat with us</h3>   
<ul class="smm">
    <li><a class="facebook" href="#"> <img src="http://lorempixel.com/output/technics-q-c-72-72-7.jpg" height="30"></a></li>
    <li><a class="twitter" href="#"><img src="http://lorempixel.com/output/technics-q-c-72-72-7.jpg" height=30> </a></li>
</ul>
</div>
<div style="clear:both"></div>
</div>


    <p class="copy-right">Website by Thor<a href="#">copyright info</a> &nbsp; &copy 2015</a></p>

</footer>

检查这个 Fiddle 。希望这对你有帮助。!!