先日、同じ幅に調整するだけでなく、左右のパディングを追加してテキストで重み付けすることにより、水平メニュー項目を調整しようとしました。目標は、コンテナの正確なスペースを満たすことでした。(かなり汚れた) コードは次のようになります。
$(document).ready(function(){
var mmenuW = $('#navinner').width(); //space to fill
var mmCount = 0; //number of menu items
var mmLiW = 0; //current summa width of menu items
$('#navinner li a').each(function(){
mmLiW += $(this).outerWidth();
mmCount++;
});
alert(''); //THE NASTY ALERT, see below
var paddPlus = Math.floor((mmenuW-mmLiW)/(mmCount*2));
$('#navinner li a').css({'padding-left': paddPlus+'px', 'padding-right': paddPlus+'px'});
var nmmLiW = 0; // new summa width of items
$('#navinner li a').each(function(){
nmmLiW += $(this).outerWidth();
});
var mmGap = mmenuW-nmmLiW-1; //remaining gap because of Math.floor
alert((paddPlus)+'px');
alert((mmGap+paddPlus)+'px');
// adding the gap to the last elements right padding
$('#navinner li a').last().css('padding-right', (mmGap+paddPlus)+'px');
}
奇妙な動作は、最初のアラートがコメント アウトされている場合です。スクリプトは正常に動作しますが、アラートが存在する場合に対して、いくつかのピクセルの不正確さがあります。
最初のアラートで、スクリプトは完璧に動作し、アラート値: '','46px','58px'
最初のアラートがなければ、スクリプトはギャップを残し、アラート値: '','46px','54px'
ブラウザ: FF 6.0、JQuery: 1.7.1、オンライン サンプルはまだありません。
/////// 編集 ////////
計算が $(document).ready で行われることが原因であることがわかりましたが、特別なフォント (この場合は google webfont が使用されます) を含むすべての css が読み込まれるわけではありません。関数は、私が思ういくつかの代替フォントで実行され、違いが生じます。したがって、問題は、$(window).load を使用せずに、フォントの読み込みをより適切に処理するにはどうすればよいかということになりました。メニューをフォーマットする前にすべての画像が読み込まれるのを待つのはそれほどエレガントではありません。