水平对齐嵌套 HTML 列表中的列答案

【问题标题】：Horizontally align columns inside nested HTML list水平对齐嵌套 HTML 列表中的列
【发布时间】：2021-07-08 11:03:14
【问题描述】：

我有一个嵌套列表，每个列表项都像表格行一样工作（使用 flex）。嵌套项目，即行从左侧缩进，因此不同级别的宽度不同。它目前具有树级别，但这可能会在某些时候发生变化。

我想：

将除第一个之外的所有“列”对齐在一条垂直线上，并且
对除第一列之外的列应用 % 宽度。

到目前为止，我只能使用固定像素宽度来实现对齐部分。但我确实需要根据最顶部ul 的百分比设置.second 和.third 列的宽度，否则这些列将无法完美对齐。固定像素宽度不利于响应速度。

我有两个选择：

删除列表项的左边距并在.first 上添加左边距。但这意味着在每个“单元格”上手动添加边框以及一些其他代码重复。
也许有办法以某种方式使用 CSS calc()。使用递归渲染列表，这似乎相当复杂。我在 React.js 组件中使用此标记，我需要将级别作为道具传递，然后以内联样式使用 calc()。看起来不干净。

ul {
  list-style-type: none;
  padding: 0;
  margin-left: 2rem;
}

.row {
  display: flex;
  border: 1px solid gray;
}

.first {
  flex-grow: 1;
}

.second,
.third {
  width: 200px;
}

<ul>
  <li>
    <div class="row">
      <div class="first">
        Title
      </div>
      <div class="second">
        Description
      </div>
      <div class="third">
        Date
      </div>
    </div>
    <ul>
      <li>
        <div class="row">
          <div class="first">
            Title
          </div>
          <div class="second">
            Description
          </div>
          <div class="third">
            Date
          </div>
        </div>
      </li>
      <li>
        <div class="row">
          <div class="first">
            Title
          </div>
          <div class="second">
            Description
          </div>
          <div class="third">
            Date
          </div>
        </div>
        <ul>
          <li>
            <div class="row">
              <div class="first">
                Title
              </div>
              <div class="second">
                Description
              </div>
              <div class="third">
                Date
              </div>
            </div>
          </li>
          <li>
            <div class="row">
              <div class="first">
                Title
              </div>
              <div class="second">
                Description
              </div>
              <div class="third">
                Date
              </div>
            </div>
          </li>
        </ul>
      </li>
      <li>
        <div class="row">
          <div class="first">
            Title
          </div>
          <div class="second">
            Description
          </div>
          <div class="third">
            Date
          </div>
        </div>
      </li>
    </ul>
  </li>
  <li>
    <div class="row">
      <div class="first">
        Title
      </div>
      <div class="second">
        Description
      </div>
      <div class="third">
        Date
      </div>
    </div>
  </li>
  <li>
    <div class="row">
      <div class="first">
        Title
      </div>
      <div class="second">
        Description
      </div>
      <div class="third">
        Date
      </div>
    </div>
  </li>
</ul>

【问题讨论】：

没有真正得到很好支持的对齐不共享父元素的方法。 display:subgrid 可以工作，但目前只支持 Firefox - caniuse.com/?search=subgrid
stackoverflow.com/questions/56711501/…
坦率地说，我认为你应该嵌套 table 元素，因为这看起来确实是你想要的。

标签： html css

【解决方案1】：

我找到了一个简单的解决方法。对于我的用例，只需将列的宽度设置为视口的百分比即可。即width: 25vw

现在无论在窄屏还是宽屏上都看起来不错。对浏览器支持也很满意：https://caniuse.com/viewport-units

请在“整页”视图中与上面的 sn-p 进行比较，以查看列宽对这个有响应，而在问题 sn-p 中没有响应。

ul {
  list-style-type: none;
  padding: 0;
  margin-left: 2rem;
}

.row {
  display: flex;
  border: 1px solid gray;
}

.first {
  flex-grow: 1;
}

.second,
.third {
  width: 25vw;
}

<ul>
  <li>
    <div class="row">
      <div class="first">
        Title
      </div>
      <div class="second">
        Description
      </div>
      <div class="third">
        Date
      </div>
    </div>
    <ul>
      <li>
        <div class="row">
          <div class="first">
            Title
          </div>
          <div class="second">
            Description
          </div>
          <div class="third">
            Date
          </div>
        </div>
      </li>
      <li>
        <div class="row">
          <div class="first">
            Title
          </div>
          <div class="second">
            Description
          </div>
          <div class="third">
            Date
          </div>
        </div>
        <ul>
          <li>
            <div class="row">
              <div class="first">
                Title
              </div>
              <div class="second">
                Description
              </div>
              <div class="third">
                Date
              </div>
            </div>
          </li>
          <li>
            <div class="row">
              <div class="first">
                Title
              </div>
              <div class="second">
                Description
              </div>
              <div class="third">
                Date
              </div>
            </div>
          </li>
        </ul>
      </li>
      <li>
        <div class="row">
          <div class="first">
            Title
          </div>
          <div class="second">
            Description
          </div>
          <div class="third">
            Date
          </div>
        </div>
      </li>
    </ul>
  </li>
  <li>
    <div class="row">
      <div class="first">
        Title
      </div>
      <div class="second">
        Description
      </div>
      <div class="third">
        Date
      </div>
    </div>
  </li>
  <li>
    <div class="row">
      <div class="first">
        Title
      </div>
      <div class="second">
        Description
      </div>
      <div class="third">
        Date
      </div>
    </div>
  </li>
</ul>

【讨论】：