LIなし浮動小数点リストLI

OK、メニューを整理するために順序付けられていないリストを使用するナビゲーションバー用のCSSを作成しています。メニューは任意の側にプッシュされずに中央に配置され、任意の要素の幅はあらかじめ決定できません（メニュー項目のテキストの量によって変わります）ので、幅をハードコードすることはできません。LIなし浮動小数点リストLI

I以下のCSSコードがありますのnav要素の

#nav ul { 
    list-style: none; 
    padding-bottom: 10px; 
    height:16px; 
} 
#nav ul li { 
    position: relative; 
    display: inline-block; 
} 
#nav { 
    position: relative; 
    margin-top: -30px; 
    text-align: center; 
    font-family: Arial,STHeiti,'Microsoft YaHei',sans-serif; 
    font-size: 14px; 
}

を、そしてこれはクローム13の中央にナビゲーションメニューを生成するために完璧に動作します。しかし、私はIE8でページを表示、ULターン私はそれを水平にすることはできません。

これまでのところ、検索結果は、float:left;またはfloat:right; <LI>にメニューを水平にする必要があることを示しています。私はこれを試してIE8でメニューを水平にしますが、左または右に浮動します。私はメニューを中心にする必要があり、明らかにないfloat:center;がありません。

メニューに対応したHTMLが

<div id="nav"> 
    <ul> 
     <li class="current_page_item">[LINK]</li> 
     <li class="page_item">[LINK]</li> 
     <li class="page_item">[LINK]</li> 
    </ul> 
</div>

ではれるLIの幅を知る必要やメニュー中心と水平を取得するために、JSに頼らずに方法はありますか？

出典

2011-08-04 Jabbany

このコードは、IE8でうまく動作します、自分の目で確かめてください：あなたはIE8モード（IE7モードや癖モードの選択肢です）にじゃないので、それはおそらくあなたのために働いていない

http://jsfiddle.net/bEEEb/

。お持ちでない場合は

は非常に最初の行としてDOCTYPEを追加します。

<!DOCTYPE html>

をあなたもIE7で動作するようにこれを必要とする場合（inline-blockは、デフォルトで自然にインライン要素で動作します）、その後でreplace display: inline-block：あなたはdisplay: inlineに逃げることができるかどう

display: inline-block; 
*display: inline; 
zoom: 1;

は..ofもちろん、それは最も簡単な修正、ですが、あなたのページはIE8モードで表示されていない、なぜあなたはまだ出て動作するはずです。

出典

2011-08-04 16:00:30 thirtydot

私は、このチップのおかげで、参照してください。私は最高のブラウザの可算性を達成しようとしています。 – Jabbany

IEはdisplay: inline-blockをサポートしていません。代わりにdisplay: inlineを使用してください。

出典

2011-08-04 15:55:20 Michael

チップをありがとう。これは完璧に動作します〜 – Jabbany

ちょうどあなたのLiで次のように使用します。

display: inline;

はあなたの欲望の結果を取得する必要があります。

出典

2011-08-04 15:56:32 Hanny

LIなし浮動小数点リストLI

答えて

関連する問題