如何拉伸多个内联块来填充父级的所有空间？

Question

经过大量的搜索，我还没有找到解决我的问题，所以现在是时候在这里问。

下面是问题：我有一个块渲染的div和可变数量的按钮呈现为该div内的内联块。我希望这些按钮均匀拉伸以填充父项的空间，例如，如果我有3个按钮，它们将拉伸到33％的宽度，如果2将是50％，依此类推。

这可以用纯CSS来完成吗？提前致谢。

Answer 1

您可以使用CSS flexbox：

.btn-holder { 
 
    margin-bottom: 15px; 
 
    display: flex; 
 
} 
 

 
.btn-holder button { 
 
    flex-grow: 1; 
 
}

<div class="btn-holder"> 
 
    <button type="button">Button 1</button> 
 
    <button type="button">Button 2</button> 
 
    <button type="button">Button 3</button> 
 
</div> 
 
<div class="btn-holder"> 
 
    <button type="button">Button 1</button> 
 
    <button type="button">Button 2</button> 
 
    <button type="button">Button 3</button> 
 
    <button type="button">Button 4</button> 
 
</div>

Answer 2

您可以设置父display: table和孩子们display: table-cell。

.container { 
 
    display: table; 
 
    width: 100%; 
 
} 
 
.container .cell { 
 
    display: table-cell; 
 
    border: solid 1px black; 
 
}

2 cells 
 
<div class="container"> 
 
    <div class="cell">1</div> 
 
    <div class="cell">2</div> 
 
</div> 
 

 
<br>3 cells 
 
<div class="container"> 
 
    <div class="cell">1</div> 
 
    <div class="cell">2</div> 
 
    <div class="cell">3</div> 
 
</div> 
 

 
<br>5 cells 
 
<div class="container"> 
 
    <div class="cell">1</div> 
 
    <div class="cell">2</div> 
 
    <div class="cell">3</div> 
 
    <div class="cell">4</div> 
 
    <div class="cell">5</div> 
 
</div>