UL類似乎不工作在我的頁腳

我一直在爲一些朋友編寫一個網站，自從昨天我的ul類不工作在我的頁腳。這ul是用於顯示社交圖標等等。當我在我的本地家居編碼是好的，但因爲我已經把網站服務器上它完全搞砸:(UL類似乎不工作在我的頁腳

這裏是我的頁腳的HTML並應用在其上的CSS。

希望你能幫幫我！

ul.social_icons, li.social { 
 
    margin-top:-23px; 
 
    padding-left:5px; 
 
    padding-right:5px; 
 
    max-width:25%; 
 
    list-style: none; 
 
    float:left; 
 
    text-decoration:none; 
 
    display:inline-block; 
 
    position: relative; 
 
} 
 

 
ul { 
 
    padding:0; 
 
    margin:0 0 0 10px; 
 
} 
 

 
.footer-social li { 
 
    float:left; 
 
    list-style:none; 
 
    margin-left:5px; 
 
}

<footer id="colophon" class="site-footer" role="contentinfo"> 
 

 
    <div class="site-info"> 
 

 
     <p>Copyright © Gaëtan POIDEVIN <span class="sep"> | </span> <a href="http://gaetanpoidevin.fr" target="_blank">Gaëtan POIDEVIN</a></p> 
 
    </div><!-- .site-info --> 
 

 
    <ul class="footer_social"> 
 
     <li class="social"><a href="https://www.facebook.com/Defilenimages/" target="_blank"><img class="img-responisve" src="http://defilenimages.fr/wp-content/uploads/2016/08/facebook-1.png"></a></li> 
 
     <li class="social"><a href="https://www.youtube.com/channel/UC8cwap7ZLC8T2ZXKJzB1M8A" target="_blank"><img class="img-responsive" src="http://defilenimages.fr/wp-content/uploads/2016/08/youtube-1.png"></a></li> 
 
     <li class="social"><a href="mailto:[email protected]"><img class="img-responsive" src="http://defilenimages.fr/wp-content/uploads/2016/08/gmail-1.png"></a></li> 
 
     <li class="social"><img class="img-responsive" src="http://defilenimages.fr/wp-content/uploads/2016/08/musiclibre004-1.png"></li> 
 
    </ul> 
 
</footer><!-- #colophon -->

來源

2016-09-01 Gaetan Lodého

我看到你在你的li標籤使用width:25%但是當你用百分比你說的到li，我想要你的父寬度25%，但你的ul沒有寬度，所以它不起作用。

當使用寬度百分比（％），作者必須注意，百分比是基於所述元素的父，或者換句話說，包含塊的寬度。如果你的父母設置爲480px，那麼百分比就是基於這個值。

在這裏你有你的問題一個jsfiddle我增加了一個固定寬度爲您ul你可以添加你想要即使使用%什麼，但記得我說的%值。我還將width:100%添加到您的img，因此它不會超出您的li。

下面是更多關於%寬度

來源

2016-09-01 08:54:25

非常感謝你，我完全忘了檢查這條線link！但是你知道爲什麼我的UL班不會在我的螢火蟲中顯示嗎？這真是讓我瘋狂:( –

/編輯/ 沒關係，我真的很累，我沒有改變我的footer.php上的ul課真的非常感謝你的幫助！ –

請標記爲正確的： D你應該從你的螢火蟲發送任何截圖。如果顯示，你有沒有嘗試鉻？ –

UL類似乎不工作在我的頁腳

回答

相關問題