无序列表中不需要的额外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>代替</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>

Answer 2

存在拼写错误。问题出在最后一个列表项目中。它未正确关闭。它应该是这样的：

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