スパンを正しく調整できません

Question

これは私のページです：http://jsfiddle.net/5RKnQ/です。アバター画像にマウスを合わせると、次のような画像が表示されます。

jsfiddleでは、ブラウザが正しく動作しているようです。とにかく、可能な限り最善の方法でボックス内に青いスパンを配置し、外側のdivを幅に合わせてできるだけ多くのスペースを節約したいと思います。

Answer 1

、私はこのコードを書くためにそれを使用することができたにもかかわらず、今日の混乱の種類jsfiddleをされています。 http://jsfiddle.net/HQ6Py/

私はあなたが欲しいものを行うにはCSSの方法があるかどうかわからないけど、ここで働いているようだいくつかのスクリプトです： -

（編集はログイン後に動作します）。基本的には、各スパンの実際の右端の位置を確認し、最大のものを追跡し、それに基づいて幅を設定します。

divの最大サイズは「最大幅：28％」で制約されていたことに注意してください。これはJSFiddleでそれを混乱させるものです。スタイルから除外し、絶対ピクセル値で置き換えてください。

$(".username").hoverIntent({ 
    over: function(e) { 
     var minLeft, maxWidth = 0, 
      list = $(this).find(".title_list"); 

     // start the fadeIn first otherwise the positions won't be available 
     list.fadeIn(300); 

     list.find('span').each(function() { 
      var left = $(this).position().left, 
       width = $(this).outerWidth() + left; 

      if (maxWidth < width) { 
       maxWidth = width; 
      } 
     }); 
     list.css("width", maxWidth); 

    }, 
    out: function(e) { 
     $(this).find(".title_list").fadeOut(300); 
    }, 
    timeout: 3000 
}); 

Answer 2

スパンを内側に浮かせて、最小幅/最大幅をコンテナに適用すると、十分でしょうか？

<link rel="stylesheet" type="text/css" href="/css/mollio/main.css"> 

しかし

<link rel="stylesheet" type="text/css" href="http://www.[website].com/css/mollio/main.css"> 

あなたが外側の幅に「自動」を置くことができるだけでなく、：これはないあなたがjsfiddleに外部リンクを置く必要があるので、それが壊れて

Answer 3

、最大幅のスパン？

私はあなたがCSSで必要なことをすることができないと思った。空き領域を少なくするための並べ替えリストについては、javascriptを使用する必要があります。

は、ここに私のjsfiddleだ：私はあなたのjsfiddleを更新することができないようhttp://jsfiddle.net/ayottepl/XLBha/