为什么宽度在表格中不起作用？

我需要在指定的HTML下面的输出，我用display:table财产与ul ul和display:table-cell财产与他们li childeren，每ul ul有四个孩子想到最后ul ul，我已经设置每个li孩子的ul ul的宽度，但它不是与最后的原始工作，我不想编辑我的HTML，请帮助我，为什么它发生。在此先感谢为什么宽度在表格中不起作用？

JSFiddle

期望输出： -

enter image description here

结果我得到： -

enter image description here

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%; 
}

来源

2015-06-01 Praveen Rawat

用空出来'

'http://jsfiddle.net/bmkbxz68/3/ – Sathish

只需添加另一个空<li></li>你的最后一排，这将是固定的，像这样：

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

来源

2015-06-01 10:02:15 brance

我同意@brance –

感谢@brance其工作 –

高兴它制定了你！ @praveen – brance

<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>

，因为ü错过THRID行的单元格

来源

2015-06-01 10:02:42

谢谢@arslan brance也给我同样的理由 –

np当我回答没有回答，有时候人们回答同一时间:) –

是的，你是正确的兄弟，但谢谢你的回答:) –

，你只需要主李

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

demo

来源

2015-06-01 10:06:01 priya786

的长度不添加任何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; 
}

来源

2015-06-01 10:31:15 stanze

你的答案工作不添加任何下一个李，@stanze，谢谢:) –

欢迎praveen :) – stanze

为什么宽度在表格中不起作用？

回答

相关问题