爲什麼寬度在表格中不起作用？

我需要在指定的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

爲什麼寬度在表格中不起作用？

回答

相關問題