HTML – 为什么宽度不能在table-cell中工作？

概述我需要以下输出与给定的html,我使用display：table属性与ul ul和display：table-cell属性与他们的li childeren,每个ul ul有四个孩子期望最后ul ul,我已经设置了每个li的宽度ul ul的孩子,但它不适用于最后的原始,我不想编辑我的 HTML,请帮助我,为什么它发生.提前致谢 JSFiddle 预计产量： – 结果我得到： – HTML： – <d 我需要以下输出与给定的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%;}

解决方法 只需添加另一个空< li>< / li>到你的最后一行它将被修复,如下所示：

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

总结

以上是内存溢出为你收集整理的HTML – 为什么宽度不能在table-cell中工作？全部内容，希望文章能够帮你解决HTML – 为什么宽度不能在table-cell中工作？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。