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>

祖先1由于某种原因设置为它的父元素的width: 100%，它必须保持这样。我希望列表项忽略祖先的宽度2＆amp; 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/

如何使子元素平均分享祖先（非父）100％宽度？

1 个答案: