Question

https://jsfiddle.net/upvxrsaz/

我制作了一个简单的页脚，但遇到了分离问题。

我使用了多个“break”标签来分隔它们，但在放大时遇到了问题。

每次我使用“span”或“float”时，它都会将它们移到不同的行上。

我想要的是这个

http://postimg.org/image/pd6r39g6b/

但没有“破解”标签。

非常感谢

HTML。

    <?xml version="1.0" encoding="utf-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[![enter image description here][1]][1]
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" dir="ltr" >
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="footer test.css" type="text/css" />
</head>
<body>

<div id="upper-footer">
</div>

<div id="footer-outer">
<div id="footer-inner">

Copyright &copy; 2015. All Rights Reserved | <a href="" title="">Privacy Policy</a><a href="" title=""><i class="fa fa-facebook fa-2x"></i></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="" title=""><i class="fa fa-twitter fa-2x"></i></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="" title=""><i class="fa fa-linkedin fa-2x"></i></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="" title=""><i class="fa fa-youtube fa-2x"></i></a>

</div>
</div>

</body>
</html>

CSS。

    /*------------------Body------------------*/
body{
    margin: 0px;
    padding: 0px;
    font-family: arial, sans-serif;
}

/*------------------Upper Footer------------------*/
#upper-footer{
    padding-top: 2px;
    padding-bottom: 2px;
    background-color: #FF0000;
}

/*------------------Footer------------------*/
#footer-inner{
    padding-bottom: 10px;
    padding-top: 8px;
    font-size: 15px;
    color: #ffffff;
    text-decoration: none;
    width: 100%;
    clear: both;
}

#footer-inner a:visited{
    text-decoration: none;
    color:#ffffff;
}

#footer-inner a:link{
    color:#ffffff;
}

#footer-inner a:hover{
    color: #FF0000;
}

#footer-inner a:active{
   color: #FFFF00;
}

/*------------------Footer Outer------------------*/
#footer-outer { 
     background: #000000;
}

Answer 1

这是你的意思吗？ - https://jsfiddle.net/hedgehog34/1pekqp0g/4/

CSS：

/*------------------Body------------------*/
body{
    margin: 0px;
    padding: 0px;
    font-family: arial, sans-serif;
}

/*------------------Upper Footer------------------*/
#upper-footer{
    padding-top: 2px;
    padding-bottom: 2px;
    background-color: #FF0000;
}

/*------------------Footer------------------*/
#footer-inner{
    overflow:hidden;
    padding:5px 0;
    font-size: 15px;
    color: #ffffff;
    text-decoration: none;
    width: 100%;
    margin: 0px auto;
    clear: both;
}

#footer-inner a:visited{
    text-decoration: none;
    color:#ffffff;
}

#footer-inner a:link{
    color:#ffffff;
}

#footer-inner a:hover{
    color: #FF0000;
}

#footer-inner a:active{
   color: #FFFF00;
}

/*------------------Footer Outer------------------*/
#footer-outer { 
     background: #000000;
}
span:first-child {
    margin-top:12px;
}

我无法回答你的最后两个问题，因为你需要澄清它们。问题2对Stack Overflow不是很受欢迎，因为它是专门针对技术问题的网站，而术语“更好”似乎是非常主观的。

Answer 2

不完全清楚这应该是什么样子但我不会在这里使用跨度，特别是当你漂浮它们时。

通过添加浮点数，你可以使它们成为块级元素，所以我更喜欢使用div。

我也更喜欢（意见不同）没有裸文本节点，所以我将版权文本等包装在一个段落中。

最后，不要将不间断的空间用于间距，这不是它们的用途。改为使用边距/填充。

＆＃13;

/*------------------Body------------------*/
 body {
    margin: 0px;
    padding: 0px;
    font-family: arial, sans-serif;
}
/*------------------Upper Footer------------------*/
 #upper-footer {
    padding-top: 2px;
    padding-bottom: 2px;
    background-color: #FF0000;
}
/*------------------Footer------------------*/
 #footer-inner {
    overflow:hidden;
    padding:5px 0;
    font-size: 15px;
    color: #ffffff;
    text-decoration: none;
    width: 100%;
    margin: 0px auto;
    clear: both;
}
#footer-inner a:visited {
    text-decoration: none;
    color:#ffffff;
}
#footer-inner a:link {
    color:#ffffff;
}
#footer-inner a:hover {
    color: #FF0000;
}
#footer-inner a:active {
    color: #FFFF00;
}
/*------------------Footer Outer------------------*/
 #footer-outer {
    background: #000000;
}
.legal, .social {
    line-height: 30px;
 }

.legal {
    float: left;
}
.legal p {
    margin: 0;
    padding-left: .5em;
}

.social a {
    display: inline-block;
    vertical-align: middle;
}

.social {
    float: right;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<body>
    <div id="upper-footer"></div>
    <div id="footer-outer">
        <div id="footer-inner">
            <div class="legal">
                <p>Copyright &copy; 2015. All Rights Reserved | <a href="" title="">Privacy Policy</a>
                </p>
            </div>
                <div class="social"> <a href="" title=""><i class="fa fa-facebook fa-2x"></i></a>
 <a href="" title=""><i class="fa fa-twitter fa-2x"></i></a>
 <a href="" title=""><i class="fa fa-linkedin fa-2x"></i></a
     <a href="" title=""><i class="fa fa-youtube fa-2x"></i></a>

                </div>
            </div>
        </div>
</body>

＆＃13;

除此之外，你的其他问题实际上不适合SO

页脚分隔

2 个答案: