Css 按钮宽度自动扩展？

我在另一个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>

---

您可以使用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;
};

---

你可以发布html代码以及为980px框添加的html代码+CSS。你说的“取决于文本”是什么意思？文本大小是否受到某种限制？嗯，我建议按钮宽度应基于文本长度，没有文本大小限制，但是长度不会超过20个字符。

$.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);