Question

我为一些朋友编写了一个网站，从昨天开始，我的ul课程并没有在我的页脚上工作。这个ul用于显示社交图标等。当我在我的本地主机上编码时，一切都很好，但由于我已将网站放在服务器上，它完全搞砸了：（

这是我的页脚的HTML和应用它的CSS。

希望你能帮助我！

＆＃13;

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

＆＃13;

<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:de.fil.en.images@gmail.com"><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 -->

＆＃13;

Answer 1

我发现您在width:25%代码中使用了li但是当您使用百分比时，您要li说我希望您的父宽度为25%但是你的ul没有宽度，所以它不起作用。

当使用百分比（％）作为宽度时，作者必须意识到百分比基于元素的父元素，或者换句话说，基于元素的元素包含块的宽度。如果您的父级设置为480px，则百分比基于该值。

您的问题有jsfiddle 我为ul添加了固定宽度，即使使用%也可以添加任何内容，但请记住我对%值所说的内容。我还在width:100%添加了img，因此它不会超出您的li。

以下link更多关于%宽度

UL课程似乎不适用于我的页脚

1 个答案: