按钮的灵活宽度

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; 
}

Answer 2

这样做：demo

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>

​

​

但是，如果您讨论的是覆盖来自.ui-button-text的css，那么就按下面的方式执行：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;
}