创建页脚HTML/CSS - 不工作

我想创建一个2类的页脚，但由于某些原因，它们不在同一行。我试过了所有的东西，我不知道这个问题是什么。页脚下方还有额外的空白区域。我希望页脚是固定的高度，并将2个元素保持在同一行（版权居中，图标在右侧）。有人可以帮忙吗？创建页脚HTML/CSS - 不工作

HTML：

<footer> 

    <div class="footer"> 

     <div class="copyright">Copyright</div> 

     <div class="social-icons-footer"> 
      <ul> 
       <li><a href="#" target="_blank"><i class="fa fa-instagram" style="font-size:30px"></i></a></li> 
       <li><a href="#" target="_blank"><i class="fa fa-facebook" style="font-size:30px"></i></a></li> 
       <li><a href="#" target="_blank"><i class="fa fa-twitter" style="font-size:30px"></i></a></li> 
       <li><a href="#" target="_blank"><i class="fa fa-linkedin" style="font-size:30px"></i></a></li> 
      </ul> 
     </div> 
    </div> 


</footer>

CSS：

footer { 
    clear: both; 
    position: relative; 
    width: 100%; 
    height: 60px; 
    background-color: black; 
      } 

    footer .copyright { 
    text-align: center; 
    padding: 12px; 
    font-size: 12px; 
    color: white; 
     } 


    footer .social-icons-footer ul { 
    list-style: none; 
    float: right; 
     } 

    footer .social-icons-footer li { 
    display: inline-block; 
     } 

    .social-icons-footer ul a { 
    color: white; 
    margin: 14px; 
    } 

    .social-icons-footer ul a:hover { 
    color: grey; 
    }

目前，它看起来像这样Image - 我想的版权是在中心和社会图标是在相同的权线。

来源

2016-09-14 C. Lagos

什么是不是在同一行？你可以把一个jsfiddle链接？或某种插图来展示你有什么和你想要达到的目标？ – Arjun

div'.footer'的用途是什么？ – Rob

http://codepen.io/anon/pen/KgzvrY

所更改的设置（除其他设置）：

footer { 
    line-height: 60px; 
} 
footer .social-icons-footer ul { 
    position: absolute; 
    top: 0px; 
    right: 12px; 
    margin: 0; 
} 
footer .social-icons-footer li { 
    line-height: 0px; 
}

来源

2016-09-14 23:31:13 Johannes

这工程！谢谢！！ –

底部有白色的空间，有什么想法？ –

可能是因为默认的身体边距。尝试添加'body，html：{margin：0; }' – Johannes

您没有设置div的是直列

将此代码添加到您的CSS div.footer div{ display: inline;} 如果没有必要也删除height:60px从footer性能..

来源

2016-09-14 23:18:43

我相信'display：inline-block'会更合适，但是否则你是正确的。 –

是行内块会更合适休息是您的需要... –

使用display:inline;在.footer

来源

2016-09-14 23:21:38

检查是否可以为你确定我削减了大多数unusefull css。

.footer {width:100%;height:30px;line-height:30px;} 
 
.copyright {width:50%;float:left;} 
 
.social-icons-footer {width:50%;float:left;} 
 
.social-icons-footer ul {text-align:right;margin: 0;padding: 0;list-style-type: none;} 
 
.social-icons-footer ul li {display:inline;padding:0px 5px;}

<link media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"> 
 
<footer> 
 

 
    <div class="footer"> 
 

 
     <div class="copyright">Copyright</div> 
 

 
     <div class="social-icons-footer"> 
 
      <ul> 
 
       <li><a href="#" target="_blank"><i class="fa fa-instagram" style="font-size:30px"></i></a></li> 
 
       <li><a href="#" target="_blank"><i class="fa fa-facebook" style="font-size:30px"></i></a></li> 
 
       <li><a href="#" target="_blank"><i class="fa fa-twitter" style="font-size:30px"></i></a></li> 
 
       <li><a href="#" target="_blank"><i class="fa fa-linkedin" style="font-size:30px"></i></a></li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 

 

 
</footer>

来源

2016-09-14 23:27:17

创建页脚HTML/CSS - 不工作

回答

相关问题