问css背景图像css不适用ul属性。
EN

Stack Overflow用户

提问于 2015-03-03 23:19:52

回答 2查看 177关注 0票数 0

I在ul中的背景图像属性有问题

这是html：

<ul class="nav" style="margin-top: 15px;">
<li style="display: table-cell;"><a class="facebook1" href="https://www.facebook.com/demo" target="_block"></a></li>
    <li style="display: table-cell;"><a class="twitter" href="https://twitter.com/MobilityGo1" target="_block"></a></li>
    <li style="display: table-cell;"><a class="youtube" href="https://www.youtube.com/bcmlpn" target="_block"></a></li>
    <li style="display: table-cell;"><a class="pinterest" href="https://www.facebook.com/demo" target="_block"></a></li>
    <li style="display: table-cell;"><a class="instagram" href="https://www.facebook.com/demo" target="_block"></a></li>
</ul>

css：

/*social icons*/

a.facebook1 {
width: 30px;
height: 30px;
padding-left: 5px;
background: url("/files/assets/facebook1.png") no-repeat;
background-size: 30px 30px;
}
a.twitter {
width: 30px;
height: 30px;
padding-left: 5px;
background: url("/files/assets/twitter.png") no-repeat;
background-size: 30px 30px;
}
a.youtube {
width: 30px;
height: 30px;
padding-left: 5px;
background: url("/files/assets/youtube.png") no-repeat;
background-size: 30px 30px;
}
a.pinterest {
width: 30px;
padding-left: 5px;
height: 30px;
background: url("/files/assets/pinterest.png") no-repeat;
background-size: 30px 30px;
}
a.instagram {
width: 30px;
padding-left: 5px;
height: 30px;
background: url("/files/assets/instagram.png") no-repeat;
background-size: 30px 30px;
}
/*social icons*/

类a.social网络显示图标，但没有显示第一个图标。

例如，当我们在网页中显示时，a.facebook1不会显示。

如果我在a.facebook1之前添加另一个社会图标类，则其他图标(包括facebook1 )将显示

http://prntscr.com/6chstf

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-03-03 23:32:28

尝试向CSS添加以下内容

.nav li > a { display: block;}

票数 2

Stack Overflow用户

发布于 2015-03-03 23:47:07

HTML

<ul class="nav" style="margin-top: 15px;">
        <li><a class="facebook1" href="https://www.facebook.com/demo" target="_block"></a></li>
        <li><a class="twitter" href="https://twitter.com/MobilityGo1" target="_block"></a></li>
        <li><a class="youtube" href="https://www.youtube.com/bcmlpn" target="_block"></a></li>
        <li><a class="pinterest" href="https://www.facebook.com/demo" target="_block"></a></li>
        <li><a class="instagram" href="https://www.facebook.com/demo" target="_block"></a></li>
    </ul>

CSS

/*social icons*/

    .nav a{
        width: 30px;
        height: 30px;
        padding-left: 5px;
        background-size: 30px 30px;
        display: block;  
    }

    .nav li{
        display: inline-block;
    }

    a.facebook1 {
        background: url("/files/assets/facebook1.png") no-repeat;
    }
    a.twitter {   
        background: url("/files/assets/twitter.png") no-repeat;
    }
    a.youtube {
        background: url("/files/assets/youtube.png") no-repeat;
    }
    a.pinterest {
        background: url("/files/assets/pinterest.png") no-repeat;
    }
    a.instagram {
        background: url("/files/assets/instagram.png") no-repeat;
    }
    /*social icons*/