get and set individual width elements

Since IE7 doesnt support CSS width:auto; width:100%; or width:inherit; on span tags i need to get and set this width with jQuery.

So how can i set span class="center_bg" to the same width as its nearest span class="text"

I tried the code below, but it applys the same width on every span class="center_bg" element on every loop thru.

jQuery('.ul li span.menu_text').each(function(i) {
   var spanWidth = jQuery(this).width();
   jQuery("span.center_bg").width(spanWidth);
})

<ul>
  <li>
    <a>
      <span class="left_bg"></span>
      <span class="right_bg"></span>
      <span class="center_bg"></span>
      <span class="text"></span>
    <a/>
 </li>
 <li>
   <a>
     <span class="left_bg"></span>
     <span class="right_bg"></span>
     <span class="center_bg">&开发者_如何学Clt;/span>
     <span class="text"></span>
   <a/>
 </li> 
</ul

1. The span element is by default display:inline element.
2. display:inline element by definition has no dedicated box - it is rather collection of individual glyph boxes able to wrap on multiple lines. Therefore width and height is undefined for inlines.

Try to define this and it should work:

.ul li span { display:inline-block; }