圖標欄周圍出現空白

我是HTML/CSS的初學者，所以請原諒我的任何明顯錯誤。我正嘗試使用Font Awesome圖標和Bootstrap創建一個響應式社交媒體頁腳。但是，頁腳兩側會出現空白。任何想法如何刪除？圖標欄周圍出現空白

White squares appearing beside the icons

a { 
 
    text-decoration: none; 
 
    color: #fff; 
 
} 
 
ul { 
 
    padding:0; 
 
    list-style: none; 
 
\t text-align: center; 
 
} 
 
.footer-social { 
 
    width: 50%; 
 
    display:block; 
 
    margin: 0 auto; 
 
} 
 
.social-icon { 
 
    color: #fff; 
 
\t background-color: #000000; 
 
} 
 
.social-icons li { 
 
    vertical-align: top; 
 
    display: inline; 
 
    height: 100px; 
 
\t text-align: center; 
 
} 
 
.social-icons a { 
 
    color: #fff; 
 
    text-decoration: none; 
 
} 
 
.fa-facebook { 
 
    padding:10px 16px; 
 
    -o-transition:.5s; 
 
    -ms-transition:.5s; 
 
    -moz-transition:.5s; 
 
    -webkit-transition:.5s; 
 
    transition: .5s; 
 
    background-color: #000000; 
 
    font-size: 1.5em; 
 
} 
 
.fa-facebook:hover { 
 
    background-color: #3d5b99; 
 
\t color: #ffffff; 
 
} 
 
.fa-twitter { 
 
    padding:10px 12px; 
 
    -o-transition:.5s; 
 
    -ms-transition:.5s; 
 
    -moz-transition:.5s; 
 
    -webkit-transition:.5s; 
 
    transition: .5s; 
 
    background-color: #000000; 
 
    font-size: 1.5em; 
 
} 
 
.fa-twitter:hover { 
 
    background-color: #00aced; 
 
\t color: #ffffff; 
 
} 
 
.fa-soundcloud { 
 
    padding:10px 10px; 
 
    -o-transition:.5s; 
 
    -ms-transition:.5s; 
 
    -moz-transition:.5s; 
 
    -webkit-transition:.5s; 
 
    transition: .5s; 
 
    background-color: #000000; 
 
    font-size: 1.5em; 
 
} 
 
.fa-soundcloud:hover { 
 
    background-color: #eb8231; 
 
\t color: #ffffff; 
 
} 
 
.fa-youtube { 
 
    padding:10px 14px; 
 
    -o-transition:.5s; 
 
    -ms-transition:.5s; 
 
    -moz-transition:.5s; 
 
    -webkit-transition:.5s; 
 
    transition: .5s; 
 
    background-color: #000000; 
 
    font-size: 1.5em; 
 
} 
 
.fa-youtube:hover { 
 
    background-color: #e64a41; 
 
\t color: #ffffff; 
 
} 
 
.fa-instagram { 
 
    padding:10px 14px; 
 
    -o-transition:.5s; 
 
    -ms-transition:.5s; 
 
    -moz-transition:.5s; 
 
    -webkit-transition:.5s; 
 
    transition: .5s; 
 
    background-color: #000000; 
 
    font-size: 1.5em; 
 
} 
 
.fa-instagram:hover { 
 
    background-color: #0073a4; 
 
\t color: #ffffff; 
 
} 
 
.fa-spotify { 
 
    padding:10px 14px; 
 
    -o-transition:.5s; 
 
    -ms-transition:.5s; 
 
    -moz-transition:.5s; 
 
    -webkit-transition:.5s; 
 
    transition: .5s; 
 
    background-color: #000000; 
 
    font-size: 1.5em; 
 
} 
 
.fa-spotify:hover { 
 
    background-color: #e25714; 
 
\t color: #ffffff; 
 
} 
 
div { 
 
\t background-color: #000000; 
 

 
}

<div class="footer-social"> 
 

 
<ul class="social-icons"> 
 

 
    <li><a href="" class="social-icon"> <i class="fa fa-facebook"></i></a></li> 
 
    <li><a href="" class="social-icon"> <i class="fa fa-twitter"></i></a></li> 
 
    <li><a href="" class="social-icon"> <i class="fa fa-soundcloud"></i></a></li> 
 
    <li><a href="" class="social-icon"> <i class="fa fa-youtube"></i></a></li> 
 
    <li><a href="" class="social-icon"> <i class="fa fa-instagram"></i></a></li> 
 
    <li><a href="" class="social-icon"> <i class="fa fa-spotify"></i></a></li> 
 
</ul> 
 

 

 
</div>

來源

2017-08-08 Chris Ng

.footer-social { 
    width: 100%; 
    display:block; 
    margin: 0 auto; 
}

頁腳欄似乎只在寬度50％，嘗試將其更改爲100％，應該跨越整個頁面寬度。

來源

2017-08-08 18:01:46

很好的回答，不僅解釋了爲什麼它的工作給予解決方案。 – Don

感謝您的回答！幫助了很多;不知道爲什麼我把50％放在第一位:) –

什麼是一個拼湊答案 – AlexCheuk

展開頁腳全寬：

.footer-social { 
    width: 100%; 
}

的jsfiddle演示：http://jsfiddle.net/z8vc9vq4/2/

來源

2017-08-08 18:01:22

取出width: 50%;從.footer-social：

.footer-social { 
    /* width: 50%; */ 
    display:block; 
    margin: 0 auto; 
}

Demo

來源

2017-08-08 18:04:00 trevorp

將主頁腳DIV寬度爲100％

來源

2017-08-08 18:04:48 krrr25

圖標欄周圍出現空白

回答

相關問題