Question

最近我发现this good-looking example用于实现按钮的某种材料设计。

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

简而言之，这样就创建了一个“按钮”：

<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（带有“class”中心）包含的文本进行更改。我尝试了几种只使用CSS的方法，但对它来说是新手，我没有找到获得内部div文本的“真实宽度”或“包装”的方法。那么我找到了一个使用jQuery / Javascript的解决方案。 Here's the fiddle使用该解决方案。

然而，我的问题是，是否有办法执行this in the JSFiddle之类的操作，但只使用HTML和CSS。

提前谢谢。

Answer 1

您可以尝试在.button类

中使用宽度属性的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;
    }

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

1 个答案: