創建頁腳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 - 不工作

回答

相關問題