css - 按钮宽度自动扩展？

Question

我在另一个 980 像素长的 div 中有一个按钮。问题是我希望按钮根据我输入的文本自动扩展，但我不知道该怎么做，因为无论我做什么，它都会扩展到 980 像素，或者它不会根据文本自动扩展。

这是我的按钮的 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>

“标题内容”的 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);