html - 如何为嵌套列表的内联表调整宽度？-6ren

html - 如何为嵌套列表的内联表调整宽度？

转载作者：行者123 更新时间：2023-11-28 06:28:58

这就是我显示嵌套列表的方式 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>

最佳答案

我编辑了 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>