CSS / JS动态宽度＆amp;字体大小

Question

我的客户端网站的导航功能设计非常紧密（而不是我）：

它由一个无序列表组成，每个列表项中有三个DIV：

<ul id="application-tabs">
   <li>
      <div class="cv-home-applications-slideshow-tab-first"></div>
      <div class="cv-home-applications-slideshow-tab"><h4>Coffee</h4></div>
      <div class="cv-home-applications-slideshow-tab-right"></div>
   </li>
   <li>
      <div class="cv-home-applications-slideshow-tab-left"></div>
      <div class="cv-home-applications-slideshow-tab"><h4>Pet Food</h4></div>
      <div class="cv-home-applications-slideshow-tab-right"></div>
   </li>
</ul>

内容位于中心DIV，而第一个/左右DIV则创建有角度的标签按钮。

此客户还在页面顶部请求了Google翻译实用程序。

我的问题是我需要导航元素始终从头到尾填充该空间。如果翻译产生一个较短的单词 - 例如“Cafe”而不是“Coffee” - 我需要相应地进行扩展。

同样，如果它产生更长的单词，比如“Cerveza”，我将需要减小字体大小。

我确信我需要使用一些javascript，结合CSS，但我不完全确定从哪里开始。任何帮助将不胜感激。

谢谢，

TY

Answer 1

这是一个解决方案的小提琴，它会自动将菜单空间以适合http://jsfiddle.net/nFRjc/

var $j = jQuery.noConflict();
    $j(document).ready(function () {
        var containerWidth = $j('#application-tabs').width();
        var linksWidth = 0;
        $j('#application-tabs li div + div').children().each(function () {
            linksWidth += $j(this).width();
        });       
        var linkSpacing = Math.floor((containerWidth - linksWidth) / ($j('#application-tabs').children('li').length));
        $j('#application-tabs').children().not(':last-child').css('margin-right', linkSpacing + "px");
    });​

简单的解决方案，如果字体太大，可以缩小字体大小。看到这个小提琴，链接字体大小是100px，但脚本减少它们直到它们适合。 http://jsfiddle.net/nFRjc/2/我刚刚添加了一个循环，用于检查各个链接的总宽度是否大于容器宽度，如果为真，则将字体大小减小1.

var $j = jQuery.noConflict();
    $j(document).ready(function () {
        var containerWidth = $j('#application-tabs').width();
        var linksWidth = 0;
        $j('#application-tabs li div + div').children().each(function () {
            linksWidth += $j(this).width();
        });
        while (linksWidth >= (containerWidth - 100)) {
            $j('#application-tabs li div + div h4').css({'font-size': '-=1'});
            var linksWidth = 0;
            $j('#application-tabs li div + div').children().each(function () {
                linksWidth += $j(this).width();
            });
        }
        var linkSpacing = Math.floor((containerWidth - linksWidth) / ($j('#application-tabs').children('li').length));
        $j('#application-tabs').children().not(':last-child').css('margin-right', linkSpacing + "px");
    });​