方向フレンドリー·ナビゲーション·バー
午前9時12分に2011年4月25日ティエリKoblentzによって午前|でCSS 101 、 開発 | 4コメント私は最近、右揃えのリンクを持つ水平方向のナビゲーションメニューに出くわした。 ご想像のとおり、それが持つリスト要素であったfloat:rightとしたリストアイテムのfloat:left 。 このアプローチには何も問題はないにもかかわらず、それは私が議論するためにこの機会を利用してインスピレーションの方向性をレイアウトのために。
浮動要素のコスト
フロートは、 方向性の概念はありません、彼らはインライン要素またはテーブルの列（そのためのように動作しないdir属性は魔法の弾丸である）。 浮動小数点数で、著者らは、値を"スワップ"するメカニズムを実装する必要がありますたびに、インターフェイスの変更（ ltr対rtl ）。
代わりに使用するのようにfloat 、著者らは有利かもしれinline-block 。 ここでは簡単な例は、次のとおりです。
ul { text-align: end; text-align: right\9; *text-align: right; } li { display: inline; } a { display: inline-block; padding: 5px 15px; margin: 0 5px; } 注意"を使用して\ 0の代わりに"（スペースなし）" \9 "オペラ座の世話をするだろうが、"などの将来の証拠として、ないかもしれません\9 "（IEのみ）。
このようにデモのページに示すように、クロム、SafariやFirefoxで、 inline-block技術は（流れの方向は、の値に一致するレイアウトを書き込みモードに依存するようにdir方向が指定されていない場合は属性、または初期値）。 他のUAのために、と理由属性セレクタ（つまり、サポートのIEの欠如のhtml[dir="rtl"]著者らは、方向の変化に応えるために、マークアップ内のフックを追加する必要があります。 たとえば、完全なAグレードの互換性のために：
- フロート法の場合：
.rtl ul { float: left; } .rtl ul li { float: right; }- インラインブロックのテクニックのために：
.rtl ul { text-align: left\9; /* IE8/9 */ *text-align: left; /* IE5/6/7 */ }
text-align: start | end
とは異なり、 leftとright 、 startとend writing-modeの依存型キーワードです。 英語では、 startに地図をleftしてendにマップright 。 に依存しstartとendではなく、 leftとrightいくつかのブラウザ（スワッピング行うことができますltr / rtl を自動的に ）。
ブラウザとテクニックの違い
- "サポートされていないブラウザでは
start/end"（IE、オペラ） - テクニックをフロート：スワッピング方向は何も変更されません
- インラインブロックのテクニック：方向は、メニューの配置を変更しませんが、リンクを適切な順序で表示されます。スワッピング
- サポート"を行うのブラウザでは
start/end"（クロームは、Safari、Firefox）を - テクニックをフロート：スワッピング方向は何も変更されません
- インラインブロックのテクニック：スワッピング方向はメニューとリンクの両方の方向をスワップするのに十分です。
それはそれだ！ あなたが水平にスタイル要素を持っている次回は、与えることを忘れないでdisplay:inline-blockまたはdisplay:tableしてみてください。
共有および拡張： del.icio.usでブックマーク | Diggそれ！ | reddit！
4コメント
申し訳ありませんが、コメントフォームは、この時点でクローズされます。
TwitterのYUIライブラリ
翻訳する
シンジケート
- すべての投稿
- すべてのコメント
- すべての開発投稿
- すべてのデザイン投稿
- YUIシアター投稿
- パフォーマンス投稿
- アクセシビリティの投稿
- "野生の"投稿
最近の投稿
YUIライブラリ
アーカイブ：
- 2012年4月 （7）
- 2012年3月 （6）
- 2012年2月 （7）
- 2012年1月 （8）
- 2011年12月 （7）
- 2011年11月 （12）
- 2011年10月 （4）
- 2011年9月 （9）
- 2011年8月 （6）
- 2011年7月 （7）
- 2011年6月 （8）
- 2011年5月 （6）
- 2011年4月 （10）
- 2011年3月 （8）
- 2011年2月 （5）
- 2011年1月 （10）
- 2010年12月 （24）
- 2010年11月 （21）
- 2010年10月 （11）
- 2010年9月 （17）
- 2010年8月 （18）
- 2010年7月 （8）
- 2010年6月 （11）
- 2010年5月 （11）
- 2010年4月 （22）
- 2010年3月 （22）
- 2010年2月 （16）
- 2010年1月 （8）
- 2009年12月 （9）
- 2009年11月 （29）
- 2009年10月 （14）
- 2009年9月 （12）
- 2009年8月 （4）
- 2009年7月 （5）
- 2009年6月 （7）
- 2009年5月 （7）
- 2009年4月 （7）
- 2009年3月 （15）
- 2009年2月 （10）
- 2009年1月 （7）
- 2008年12月 （11）
- 2008年11月 （12）
- 2008年10月 （16）
- 2008年9月 （4）
- 2008年8月 （9）
- 2008年7月 （12）
- 2008年6月 （11）
- 2008年5月 （12）
- 2008年4月 （11）
- 2008年3月 （7）
- 2008年2月 （10）
- 2008年1月 （6）
- 2007年12月 （12）
- 2007年11月 （6）
- 2007年10月 （5）
- 2007年9月 （8）
- 2007年8月 （6）
- 2007年7月 （3）
- 2007年6月 （7）
- 2007年5月 （12）
- 2007年4月 （8）
- 2007年3月 （7）
- 2007年2月 （7）
- 2007年1月 （8）
- 2006年12月 （5）
- 2006年11月 （6）
- 2006年10月 （11）
- 2006年9月 （4）
- 2006年8月 （5）
- 2006年7月 （2）
- 2006年6月 （3）
- 2006年5月 （7）
- 2006年4月 （2）
- 2006年3月 （1）
- 2006年2月 （14）
ブログロール
ポリシーのコメント
我々は、ブログ上での会話に寄与コメントを奨励しています。 それらが不適切な、またはそうでなければ私たちの違反トピック、オフになっている場合、そのYahoo!は、当社の裁量で、コメントを削除することができますのでご注意くださいご利用のサービスを 。
ヤフーになる
あなたは、革新的で楽しい環境に没頭しようとして有能なエンジニア、プロダクトマネージャー、またはデザイナーですか？ 次に来る私たちと仕事を見つける 。
メタ：
ティエリ、
この文は部分的に正しくありません。
は、この一連のテストを参照してください。 フロートと双方向性を示すと、このテストフローティングメニューが'rtl'の方向にします。 現在OperaとWebKitが 'rtl'で双方向レイアウトで間違ったオーバーフローを処理します。
私はあなたのアプローチは、（CSSをハッキング）IE7-幸せにするためにコーディングのようなものですと言うだろう。 これは役に立ちませんが 'rtl'の方向を持っているスクリプト（つまり、ヘブライ語やアラビア語）を読み書き何百万人もの人々の100s。 でIE7-、Web開発者が 'rtl'の方向にIE7は、動作させるために非常にハックしなければなりませんでした。 が'rtl'の方向でそのようなページ用のCSSで表示する一つの共通点は、使用することである
text-align: rightおよびtext-align: rightテキストの正しい配置を達成するために。 私はIEが悪いが 'rtl'の方向を処理したブラウザのみされていない状態になります。今、この多分あなたには驚きますが、IE8は正しくRTL方向をサポートしています。 IE8であった右の前にそれをやった唯一のブラウザは、Geckoです。 私はこの非常に記事が双方向性については、この全体の誤報に追加されて以来ulとli両方が右ではなく、IE8やIE9をハックフロートことを示唆している。
私はモードと方向の記述に関する仕様にいくつかの影響を与えた。 これは、関係された論理プロパティ 、 floatおよびRTLのオーバーフローおよびオーバーフローと双方向に 。
コメントby アランGresley - 2011年4月26日＃
@アラン
あなたは私を混乱させています。 私の知る限り仕様[1] "スタート"のようなもののみ表示されますがありません知っているが、あなたのページ"RTLの開始：右またはフロートフロート"に言及
left、right、noneとinherit。それはあなたのテストケースで使用しているものだと思われる。 つまり、私が思うにもかかわらず、 "オーバーフロー可視RTLのブロックを含む"
text-align:rightにあり、冗長であり、そのtext-align:startとにかくより適切だったでしょう。また、この記事で私が使用する"を示す"ことに注意してください
text-align: start|end。right|leftの値が唯一のフォールバックとして使用されています。実際に、あなたは異なるコンテキストに応じてスタイルのものすることを避けるために、この記事の全体のポイントを逃した可能性があります。 RTLとLTRのコンテキストスワップでドロップダウンメニューを示しています。デモページには何も新しい:-(ある値と左/右のプロパティを、フロート
ご意見をいただきありがとうございます！
[1] http://www.w3.org/TR/CSS21/visuren.html＃フロート位置
コメントby ティエリKoblentz - 2011年4月26日＃
楽しいOh。 テスト。
フロートと双方向性
コメントby アランGresley - 2011年4月26日＃
すばらしい！ 多くの感謝ティエリ！
私は問題を解決する最後の文でも同様の問題とあなたのアドバイスに対処されました。
私はこのコードを持っていた：
< - 方向：RTL;
< - 位置：絶対;方向：LTR;
1 < - フロート：左;
2 < - フロート：左;
3 < - フロート：左;
コンテンツ
IE9を除くすべてのブラウザでは、行のボタンが表示されました。 しかし、IE9は、（：存在しなかったように "左フロート"であれば）彼らはお互いを怒鳴る表示
最後に、私は "ハンドル" DIV属性 "テーブル表示"に追加した後、それが動作しました。
どうもありがとう、
ラデク·。
によるコメントラデクプルシビル - 2011年10月10日＃