我有一个客户网站，该网站的导航功能经过精心设计（并非由我自己设计）：
它由一个无序列表组成，每个列表项中都有三个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，但是我不确定要从哪里开始。任何援助将不胜感激。
谢谢，
ty
最佳答案
这是一个解决方案的小提琴，它会自动将菜单隔开以适合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/我刚刚添加了一个循环，用于检查各个链接的总宽度是否大于容器宽度，如果为true，则将字体大小减小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");
});