最近我发现this good-looking example用于为按钮实现某种 Material 设计。
每个按钮都由几个类组成,因此只需修改其中一个就可以对其进行自定义。我的问题是,我希望按钮随着它们包含的文本改变宽度。
简而言之,一个“按钮”是这样创建的:
<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(类为“center”)包含的文本更改父 div 的宽度(类为“button”和“flat”的类)。我尝试了几种仅使用 CSS 的方法,但作为新手,我没有找到获取内部 div 文本的“实际宽度”或“包装它”的方法。所以后来我找到了一个使用 jQuery/Javascript 的解决方案。 Here's the fiddle使用该解决方案。
但是,我的问题是是否有办法做类似 this in the JSFiddle 的事情,但仅使用 HTML 和 CSS。
提前谢谢你。
最佳答案
您可以尝试在 .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;
}
关于jquery - CSS - 根据包含的文本宽度更改 DIV 宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27786692/