CSS-根据所包含文本的宽度更改DIV的宽度

Question

最近，我发现了这个漂亮的示例，用于实现按钮的某种材质设计。

每个按钮由几个类组成，因此只需修改其中一个即可对其进行自定义。 我的问题是，我希望按钮更改其宽度以及它们包含的文本。

简而言之，以这种方式创建“按钮”：

<div class="button flat">
    <div class="center" fit><b>NOT NOW</b></div>
    <!--A custom tag, it came with the [original example][2]-->
    <paper-ripple fit></paper-ripple>
</div>

我需要父div宽度（具有“ button”和“ flat”类的那个）的宽度根据内部div（具有“ center”类的）所包含的文本进行更改。 我尝试了几种仅使用CSS的方法，但由于它是新手，所以我没有找到获取内部div文本的“实际宽度”或“包装”的方法。 因此，我找到了使用jQuery / Javascript的解决方案。 这是使用该解决方案的小提琴 。

但是， 我的问题是，在JSFiddle中是否有一种方法可以做到这一点 ，而仅使用HTML和CSS。

先感谢您。

Answer 1

您可以尝试在.button类中对width属性使用CSS最小宽度规则

.button {
      display: inline-block;
      position: relative;
      min-width:60px;
      width:auto;
      height: 32px;
      line-height: 32px;
      border-radius: 2px;
      font-size: 0.9em;
      background-color: #fff;
      color: #646464;
    }