html - 如何使子元素平均共享祖先(非父元素)的 100% 宽度？

Question

HTML:

<div class="ancestor1">
    <div class="ancestor2">
        <div class="ancestor3">
            <ul>
                <li>List Item 1</li>
                <li>List Item 2</li>
                <li>List Item 3</li>
                <li>....
            </ul>
        </div>
    </div>
</div>

Ancestor 1 出于某种原因被设置为其父元素的 width: 100% 并且它必须保持这样。我希望列表项忽略祖先 2 和 3 的宽度，并在它们之间使用相等的填充平均共享祖先 1 的宽度。列表项必须覆盖祖先 1 的宽度并包含填充。您可能建议更改祖先 2 和 3 的宽度以达到效果，但不是祖先 1。祖先 1 必须将宽度设置为 100%。

Answer 1

我想，您可以使用 flexbox 来解决您的问题。你可以阅读this guide找到使用这种好方法的其他示例。但我应该注意到，这种方法有一个缺点，old browsers 不完全支持它。 .

解决方法如下:

HTML:

<div class="ancestor1">
    <div class="ancestor2">
        <div class="ancestor3">
            <ul>
                <li>List Item 1</li>
                <li>List Item 2</li>
                <li>List Item 3</li>
                <li>....
            </ul>
        </div>
    </div>
</div>

CSS:

.ancestor1 {
  width: 100%;
}

.ancestor1 ul {
  display: flex;
  padding: 0;
}

.ancestor1 ul > li {
  flex-grow: 1;
  display: inline-block;
  text-align: center;
  border: solid red 1px;
}

https://jsfiddle.net/y3ob5Ldk/1/