Question

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

Answer 1

我编辑了Display nested list like a table中的代码，也是您的帖子。

如果这不是你想要的，我会尽我所能来修改它并让它发挥作用。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

编辑：我发现这不是你想要的，但也许对任何其他用户都有用。我会尝试修改它:)）

如何获得嵌套列表的内联表的自适应宽度？

1 个答案: