0

我有一个客户站点，其导航功能设计得非常严密（而不是由我设计）：

幻灯片导航

它由一个无序列表组成，每个列表项中有三个 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”，我需要减小字体大小。

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

谢谢，

泰

4

1 回答 1

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");
    });​
于 2012-08-29T20:08:12.553 回答