このライブ URL を一時的に開きます。そうしないと、この問題を説明するのが難しくなります。
[テスト URL 閉鎖]
これをメディア クエリをサポートするブラウザで開き、ブラウザのサイズをモバイル用に変更して、ビューポート幅が約 400 ピクセル以下になるようにしてください。
ご覧のとおり、グローバル ナビゲーション メニューの [タグ] オプションが表示され、アクティブで、右に配置されています。これは正しく機能し、右にフロートすることで実現されます。
.nav-option-active { @include inline-block; float:right; }
(注: 私は SASS を使用しているため、@include 構文を使用しています)
ここまでは順調ですね。ただし、ビューポートが大きくなるにつれて、ナビゲーション オプション (このアクティブなオプションと追加のオプションの両方) を通常どおりに表示するためのスペースが増えます。余裕があれば、浮いてはいけません。ビューポートをより大きなサイズに変更すると、他のナビゲーション オプションでこれがどのように機能するかを確認できます。
上記を参照。グローバル ナビゲーション オプションは本来のようにフローティングされていないように見えますが、アクティブなナビゲーション オプション (この場合はタグ リンク) は右側にフローティングされたままです。より大きなビューポートでやりたいことは、そのフロートを元に戻すことだけです。これにより、リンクはインライン ブロックとして動作し、フロートされず、他のリンクと同じようにマークアップに表示されます。そうする私の試みは次のとおりです：
.nav-option-active, .nav-option-active a, .nav-option-active a em { float:none; }
コードは絶望的なものであることに注意してください。実際には、 .nav-option-active 要素のみに float:none を設定する必要があります。
スクリーンショットからわかるように、フロートは元に戻されておらず、その理由がわかりません。Firebug では、float:none が実際に適用され、float:right が打ち消され、float:none によって無効になっていることがわかります。したがって、CSS は確実に適用されますが、効果はありません。Clear:both も効果がありませんが、使用するのに適切なプロパティではないと思います。奇妙なことに、Firebug で実際に実行時にフロート ルールを取り除くと、目的の動作が実現されます。
非常に基本的なことを見落としているか、基本的なことを誤解しているように感じます。一度設定したフロートを元に戻すにはどうすればよいですか?