css - 按钮的灵活宽度

Question

我正在为我的按钮使用下面的 CSS

 .ui-button-text {
background-color:#3e9cbf !important;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #F0F8FF !important;
width: 50px;
}

在这里，如果你要检查，我正在使用 width: 50px; 但我希望按钮的宽度应该是灵活的，如果按钮文本是 Submit<，它应该根据文本大小改变宽度 然后按钮宽度会变小，但如果文本是这样的 Post Your Question 现在按钮宽度应该改变。 我们如何使用 css 实现这一目标？

Answer 1

如果您使用的是 div，那么您需要将其设置为 display:inline-block 那么您就不需要设置宽度。

演示 http://jsfiddle.net/kevinPHPkevin/kw3La/

.ui-button-text {
    background-color:#3e9cbf !important;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #F0F8FF !important;
    padding: 10px;
    display:inline-block;
    width: auto !important; 
}