没有填充的棋盘HTML列表<li> </li>

Question

是否可以仅使用此HTML创建此checkerboard-styled social media（随意添加类/ ID）：

<ul>
    <li><a href="#">Facebook</a></li>
    <li><a href="#">Twitter</a></li>
    <li><a href="#">Google+</a></li>
    <li><a href="#">LinkedIn</a></li>
</ul>

我必须自己创建空<li></li>，我认为HTML是'脏的'。这是我的最后一次尝试，但有点'脏'：

<!-- html code -->
<ul>
    <li><a href="#"><img src="facebook.png" /></a></li>
    <li></li>
    <li><a href="#"><img src="twitter.png" /></a></li>
    <li></li>
    <li></li>
    <li><a href="#"><img src="google.png" /></a></li>
    <li></li>
    <li><a href="#"><img src="linkedin.png" /></a></li>
</ul>

/* stylesheet */
ul
{
list-style-type: none;
    width: 128px;
}
li
{
    display: inline;
    float: left;
    background-color: #000;
    width: 32px;
    height: 32px;
}
li img
{
    width: 32px;
    height: 32px;
}

Answer 1

您需要nth-child selector。

ul { list-style-type: none; }
li
{
    display: inline;
    float: left;
    background-color: #000;
    width: 32px;
    height: 32px;
}
ul :nth-child(2n)
{
    position: relative;
    top: 32px;
}
li img
{
    width: 32px;
    height: 32px;
}