为什么宽度不能用于表格单元格？

Question

我需要使用给定html的以下输出，我使用display:table属性ul ul和display:table-cell属性与li childeren，每个ul ul有四个孩子期待最后ul ul，我已经设置了li的每个ul ul孩子的宽度，但它不适用于上一个原始，我不想编辑我的HTML，请帮助我，为什么会这样。提前致谢

JSFiddle

期望输出： -

我得到的结果： -

HTML： -

<div>
<ul>
    <li>
        <ul>
            <li><a href="#">11</a></li>
            <li><a href="#">12</a></li>
            <li><a href="#">13</a></li>
            <li><a href="#">14</a></li>
        </ul>
    </li>
    <li>
        <ul>
            <li><a href="#">21</a></li>
            <li><a href="#">22</a></li>
            <li><a href="#">23</a></li>
            <li><a href="#">24</a></li>
        </ul>
    </li>
    <li>
        <ul>
            <li><a href="#">31</a></li>
            <li><a href="#">32</a></li>
            <li><a href="#">33</a></li>            
        </ul>
    </li>
</ul>

CSS： -

 ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100% !important;
}
div > ul{
    display: block;    
    width: 100%;
}
div > ul > li {
  width: auto;
}
div > ul ul{
    display: table;
    table-layout: fixed;
}
div > ul ul li {
  border-left: 1px solid #ebebeb;
  display: table-cell;
  line-height: 0.9;
  padding: 5px 20px;
  width: 25%;
}

Answer 1

<div>
<ul>
    <li>
        <ul>
            <li><a href="#">11</a></li>
            <li><a href="#">12</a></li>
            <li><a href="#">13</a></li>
            <li><a href="#">14</a></li>
        </ul>
    </li>
    <li>
        <ul>
            <li><a href="#">21</a></li>
            <li><a href="#">22</a></li>
            <li><a href="#">23</a></li>
            <li><a href="#">24</a></li>
        </ul>
    </li>
    <li>
        <ul>
            <li><a href="#">31</a></li>
            <li><a href="#">32</a></li>
            <li><a href="#">33</a></li>
            <li><a href="#"> </a></li> 
        </ul>
    </li>
</ul>

因为你错过了第三行中的单元格

Answer 2

只需在您的最后一行添加另一个空的<li></li>，它就会被修复，如下所示：

<ul>
    <li><a href="#">31</a></li>
    <li><a href="#">32</a></li>
    <li><a href="#">33</a></li>
    <li></li>
</ul>

Answer 3

你只需要掌握li的长度

<ul><li></li>
<li></li>
<li></li>
<li></li>

demo

Answer 4

不添加任何li，请尝试此Demo

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100% !important;
}
div > ul{
    display: block;    
    width: 100%;
}
div > ul > li {
  width: auto;
}
div > ul ul li {
  border-left: 1px solid #ebebeb;
  display: table-cell;
  line-height: 0.9;
  padding: 5px 20px;  
}