Question

我试图在页脚中对齐项目，但我似乎无法做到这一点。

我想要做的就是添加地址，即家里等等

下面我试图在右边的同一行中添加隐私，合法等分享按钮。

下面我有版权，中间位于底部。

我几乎可以得到它但不完全。

我试图让页脚包含3行。最上面的一个包含网站链接，如家庭，博客等中间链接，包含法律免责声明等链接但在其右上角我希望社交图标和最后一行包含版权信息。

这是我的fiddle

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

我立即注意到了两件事。

背景颜色不起作用，因为在CSS中您定位.footer类。您需要定位footer标记（请注意前面没有句号）。

您不应在文档中多次使用ID（而是使用类）。

至于布局，我不太明白你在说什么。回到我身边，我会帮助你。

Answer 2

根据您的需要安排。红色边框用于突出显示。 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 。希望这能帮到你。!!

Answer 3

如果只有页脚颜色是您的问题，那么您的错误就是您的代码。

.footer{
    margin-top: 200px;
    height:20%;
    width: 100%;
    background-color:#000000;
}

你可以做的改变是

footer{
    margin-top: 200px;
    height:50px; //Give it a fixed height for now to check.
    width: 100%;
    background-color:#000;  
}

请告诉我您的解决方案，如果需要，请随时提出更多意见。

最好的问候。

页脚对齐

3 个答案: