HTML:在树/菜单结构上显示非 float 元素的全部内容

Question

我需要正确设置菜单/树状结构的外观。

每个元素由三个元素组成:两个 float (一左一右)和最后一个非 float 以填充剩余空间，并在可能时自动扩展容器。

在第一个关卡中所有内容都正确呈现，但在子关卡上容器的宽度太小。

注意:我需要每个级别的 ul 容器根据其内容独立调整大小。

HTML 示例结构:

<ul>
  <li>
    <div class="link">
      <span></span>
      <span>3434</span>
      <span>Item 1</span>
    </div>
    <ul>
      <li>
        <div class="link">
          <span></span>
          <span>123</span>
          <span>Item 1.2</span>
        </div>
      </li>
      <li>
        <div class="link">
          <span></span>
          <span>312</span>
          <span>Item 1.2342342</span>
        </div>
      </li>
      <li>
        <div class="link">
          <span></span>
          <span>12</span>
          <span>Item 1.2234123</span>
        </div>
      </li>
    </ul>
  </li>
  <li>
    <div class="link">
      <span></span>
      <span>3453</span>
      <span>Item 2123123123123123123</span>
    </div>
  </li>
  <li>
    <div class="link">
      <span></span>
      <span>34534</span>
      <span>Item asdasdasd</span>
    </div>
  </li>
</ul>

CSS:

ul {
  position: absolute;
  background: white;
  border: 1px solid black;
  overflow: visible;
  margin: 0;
  padding: 0;
}

li {
  position: relative;
  margin: 0;
  padding: 0.1em 0.5em;
}

ul>li>ul {
  left: 100%;
}

.link {
  display;
  block;
  position: relative;
}

.link>span:nth-child(1) {
  display: block;
  float: left;
  width: 1em;
  height: 1em;
  margin-right: 0.25em;
  background: cyan;
}

.link>span:nth-child(2) {
  display: block;
  float: right;
  height: 1em;
  margin-left: 0.25em;
  background: red;
  color: white;
}

.link>span:nth-child(3) {
  display: block;
  white-space: nowrap;
  overflow: auto;
}

Here a jsfiddle to better show the problem

Answer 1

您可以增加 .ul>.li>.ul 元素的宽度:

ul>li>ul {
  left: 100%;
  width:100%;
}

这将使它增加到与顶级菜单相同的宽度:

https://jsfiddle.net/dxr76e1z/1/