html - 没有填充的棋盘 HTML 列表

Question

是否可以创建这个 checkerboard-styled social media只有这个 HTML(随意添加类/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;
}