根据内部文本展开div

Question

我的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？

Answer 1

从div（width）中删除width: 130px规则。

这最终看起来有点紧张，但你可以通过一些填充来解决这个问题

padding-left: 5px;
padding-right: 5px;

http://jsfiddle.net/ExplosionPIlls/zXN6C/