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

这样做：演示

CSS：

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

html:

<button class="ui-button-text">Submit</button>
<button class="ui-button-text">Post your question</button>

但是，如果您正在谈论覆盖来自的 css，.ui-button-text请按照此处操作：http: //jsfiddle.net/bcqPG/1/

CSS：

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

button.ui-button-text{
    width:auto;
    padding:2px 6px;
}

Answer 2

如果您使用的是 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; 
}