灵活的按钮宽度

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;，但我希望按钮shuold的宽度是灵活的，如果按钮文本为Submit，则应根据文本大小更改宽度，然后按钮宽度会很小但是如果文本是这样的Post Your Question，现在按钮宽度应该改变。 我们怎样才能用css实现这个目标？

Answer 1

这样做：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;
}

Answer 2

如果您使用div，则需要将其设置为display:inline-block，然后您不需要设置宽度。

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