html - 无序列表中不需要的额外 li 元素

Question

所以，我有一个无序列表，其中包含键盘按钮。问题是出于某种原因，有一个额外的 <li>列表末尾的元素，这最终会搞砸一切。我该如何解决这个问题？

<ul id="buttons">
   <li><div><a><span>1</span></a></div><div><a><span>2</span></a></div><div><a><span>3</span></a></div></li>
   <li><div><a><span>4</span></a></div><div><a><span>5</span></a></div><div><a><span>6</span></a></div></li>
   <li><div><a><span>7</span></a></div><div><a><span>8</span></a></div><div><a><span>9</span></a></div></li>
   <li style="max-width:80px;margin:auto;"><div><a><span>0</span></a></div><li>
</ul>
//as you can see only 4 li elements

//styles
li {
    width: 100%;
    border-spacing: 10px 5px;
    display: table;
    table-layout:fixed;
    text-align: center;
}
ul {
    position: relative;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
    list-style-type: none;
}

但是当我在 chrome 中打开文档时，有 5 个 <li>元素。

Answer 1

有一个拼写错误。问题出在您的最后一个列表项上。它没有正确关闭。它应该是这样的:

 <li style="max-width:80px;margin:auto;"><div><a><span>0</span></a></div></li>