按钮宽度自动扩展？

Question

我在另一个div中有一个980px长的按钮。问题是我希望按钮自动扩展取决于我放入的文本，但我不知道该怎么做，因为我做的只是扩展到980px或它不会根据文本自动扩展。

这是我的按钮的CSS代码：

.button_small_menu {
        color: #fff;
        font: 10px/1 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
        padding: 5px;
        text-align: center;
        width: 80px;
        float: right; }
    .button_small_menu:hover {
        background-color: #4781b3;
        cursor: pointer; }

HTML代码：

    <div class="header-content">
        <div class="button_small_menu">Logout</div>
    </div>

“header-content”的CSS：

.header-content {
    width:980px;
    margin:auto; }

Answer 1

您可以使用jquery执行此操作。首先通过此代码

计算文本的长度

$.fn.textWidth = function(){
  var html_org = $(this).html();
  var html_calc = '<span>' + html_org + '</span>';
  $(this).html(html_calc);
  var width = $(this).find('span:first').width();
  $(this).html(html_org);
  return width;
};

之后用该代码改变按钮的宽度

$('.selector').width(yourwidth);