我的 HTML 中有以下 div 元素。它们充当按钮。
<div id="button-section">
<!-- Section for function buttons -->
<div class="fn-button">
<!-- Function button -->
<span>My Current Checks</span>
</div>
<div class="fn-button">
<!-- Function button -->
<span>All Current Checks</span>
</div>
<div class="fn-button">
<!-- Function button -->
<span>Add New order</span>
</div>
</div>
这是我用于那里元素的 CSS。
#button-section{
width: 100%;
height: 150px;
position: fixed;
bottom: 0;
background-color: rgb(229, 229, 255);
}
.fn-button{
width: 130px;
height: 50px;
float: left;
margin: 10px 0px 0px 20px;
border-radius: 10px;
background: rgb(111, 111, 111);
box-shadow: inset 1px 4px 12px rgb(0, 0, 0);
text-align: center;
}
.fn-button span{
padding: 0px;
margin: 0px 0px 0px 0px;
color: white;
vertical-align: -17px;
font-size: 20px;
}
问题是，我需要根据每个 div 元素内的文本调整宽度。！为此，我必须为每个元素定义宽度或找到另一种方法。下图将显示我的 div 情况。
如何根据内部文本动态扩展 div？