创建页脚 HTML/CSS - 不工作

Question

我正在尝试使用 2 类创建页脚，但由于某些原因，它们彼此不在同一行。我已经尝试了一切，但我不知道问题出在哪里。页脚下方还有额外的白色 space。我希望页脚具有固定高度，并将 2 个元素保持在同一行上（版权居中，图标在右侧）。有人可以帮忙吗？

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 - 我希望版权位于中心，社交图标位于同一行的右侧。

Answer 1

您没有将 div 设置为内联

将此代码添加到您的 CSS div.footer div{ display: inline;} 如果不需要，还可以从 footer 属性中删除 height:60px..

Answer 2

在 .footer

中使用 display:inline;

Answer 3

检查一下这对你来说是否合适我删掉了最没用的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>

Answer 4

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

创建页脚 HTML/CSS - 不工作

Creating Footer HTML/CSS - Not Working

html

css

footer