匿名質問者
匿名質問者匿名質問者とは「匿名質問」を利用して質問した質問者。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら

ChromeとSafariで発生する現象について【jQuery】


HPのグローバルナビをページ中央に設置するhtmlを作っています。
今後メニューの増減が発生することがあるとのことで、
以下のJSでliの幅を合計してulの幅にするようにしています。
(使うのはあまりWEBに詳しくない人なので。)

が、ChromeとSafariでは少ないwidthになり、メニューが2段になってしまいます。
しかし、1回更新すると本来あるべきサイズになってくれます。
Firefoxでは発生しないのですが、ChromeとSafariで同現象が起こります。

色々試してますが、なかなかうまく行きません。
良いアドバイスを頂ければ幸いです。

【HTML】
< nav id="g-nav">
< ul>
< li><a href="">text01</a></li>
< li><a href="">text02</a></li>
< li><a href="">text03</a></li>
< /ul>
< /nav>

【jQuery】
var w_sum = 0
$("#g-nav li").each(function(){
w_sum += $(this).innerWidth(true);
$("#g-nav ul").width(w_sum);
});

【CSS】
#g-nav{
width: 100%;
}
#g-nav ul{
margin: 0 auto;
padding: 0 50px;
}
#g-nav li{
float: left;
height: 32px;
}
#g-nav li a{
color: black;
font-family: lato;
font-size: 110%;
padding: 10px 16px;
text-decoration: none;
}
#g-nav li a:hover{
background-color: #f0f0f0;
}

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2014/01/07 17:27:56
  • 終了:2014/01/14 17:30:04

回答(0件)

回答はまだありません

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません