如何獲取嵌套列表的內聯表的適應寬度？

這就是我如何顯示嵌套列表jsFiddle。正如你所看到的那樣，由於內容長度不同，所以'列'不能正確對齊。元素 - 例如 - 應該在正確的邊界。如何獲取嵌套列表的內聯表的適應寬度？

是否有可能以相對或固定大小獲取每個'列'的寬度？完整的列表應該有100％的寬度。

，顯我想要得到這樣的：https://jsfiddle.net/bsrms9ax/2/

ul { 
 
    display: inline-table; 
 
    border: 1px solid #000; 
 
    padding: 0px; 
 
    list-style: none; 
 
}

<ul> 
 
    <li>Main Title 
 
    <ul> 
 
     <li>Title 1 
 
     <ul> 
 
      <li>Element 1</li> 
 
      <li>Element 2</li> 
 
      <li>Element 3</li> 
 
     </ul> 
 
     </li> 
 
     <li>Title 2 
 
     <ul> 
 
      <li>Element 4</li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li>Longer Main Title 
 
    <ul> 
 
     <li>Long Title 1 
 
     <ul> 
 
      <li>Element 1</li> 
 
      <li>Elem 2</li> 
 
      <li>Element 3</li> 
 
     </ul> 
 
     </li> 
 
     <li>Title 2 
 
     <ul> 
 
      <li>Element 4</li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>

來源

2016-01-30 user3142695

你可以張貼願望輸出的圖片嗎？ – Stickers

@Pangloss：類似這樣的：https：//jsfiddle.net/bsrms9ax/1/就像一個**可見的**結果（因爲這是由一個真正的表完成的） – user3142695

JS是一個選項嗎？ – Stickers

我將爲您編輯的代碼Display nested list like a table，也是一個帖子。

如果這不是你想要的，我會盡我所能去修改它並使其工作。

// ADD SOME CODE 
 
// www.Agary.info Agario server ;-) 
 
// BEST LUCK IN YOUR CODE BRO

body>ul { 
 
    display:table; 
 
} 
 
li { 
 
    display: flex; 
 
    display: -webkit-inline-flex; 
 
    border: 1px solid #000; 
 
    padding: 0px; 
 
    list-style: none; 
 
}

<html> 
 
    <!-- Added some css..--> 
 
    <head> 
 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css"> 
 

 
    </head> 
 
    
 
    <body> 
 
<ul> 
 
    <li>Main Title 
 
     <ul> 
 
      <li>Title 1 
 
       <ul> 
 
        <li>Element 1</li> 
 
        <li>Element 2</li> 
 
        <li>Element 3</li> 
 
       </ul> 
 
      </li> 
 
      <li>Title 2 
 
       <ul> 
 
        <li>Element 4</li> 
 
       </ul> 
 
      </li> 
 
     </ul> 
 
    <li> 
 
    </li> 
 
    <li>Main Title 
 
     <ul> 
 
      <li>Title 1 
 
       <ul> 
 
        <li>Element 1</li> 
 
        <li>Element 2</li> 
 
        <li>Element 3</li> 
 
       </ul> 
 
      </li> 
 
      <li>Title 2 
 
       <ul> 
 
        <li>Element 4</li> 
 
       </ul> 
 
      </li> 
 
     </ul> 
 
    </li> 
 
</ul> 
 
    </body> 
 
    </html>

編輯：我看這不是你想要的，但也許將是任何其他用戶有用。我會嘗試修改它:)

來源

2016-01-30 18:54:25 Skyleter

謝謝。是的，我發佈了一個我需要的示例：https://jsfiddle.net/bsrms9ax/2/ – user3142695

你到底需要什麼？我沒有看到你的例子有任何問題。從標題2中分離標題1？ – Skyleter

正如您在發佈的代碼片段中看到的單元格具有不同的大小，所以表格看起來非常混亂。看看評論中的jsfiddle示例，您會看到一個乾淨的表格解決方案。所有細胞都彼此對齊... – user3142695

如何獲取嵌套列表的內聯表的適應寬度？

回答

相關問題