ULセンタリング_エクスペリエンス交換の問題を解決するときに頭に浮かぶいくつかのポイント

最近、Web サイトを構築しているときに問題が発生しました。ul タグと li タグを使用して構築したナビゲーション バーは、li の数と li、ul の幅が分からずに中央に配置したいのですが、text-align:center を使用した後、 ul しかし、期待したような効果はありませんでした。

元のページ構造は次のとおりです:

コードをコピー コードは次のとおりです。

• ファイアデ


• スタイル 5

スタイル シートの構造は次のとおりです。

コードをコピー コードは次のとおりです。

これ自体は問題ありませんが、機能を実装するためにID(menu)と2つのCLASS(menu_ul、menu_li)を定義しているため、CSSファイルが肥大化してしまいます。

ULセンタリングの問題が分からないのはCSSがごちゃごちゃしすぎてチェーンの最後で混乱してしまう 構造を定義するコードが色々混在しているエフェクトを表示するために書いたコードがめちゃくちゃでした。

頭がクラクラしてきたので、これ以上修正したくなかったので、上記の機能を実装するためにコードを書き直しました。ページ構造:

コードをコピー a> コードは次のとおりです。

ファイアデ

• スタイル 5

完全なスタイル シート:

コードをコピー コードは次のとおりです。

このように、ulを中心に配置できない問題を解決するのは非常に簡単です。コードを振り返ってみると、li のスタイルで float:left という余分な文を追加したことが原因でした。定義された表示がブロックではなくインラインであるため、フロートにできず、競合が発生し、最終的には ul中央に表示できません。

要約すると、Web ページの構造を記述するときは、同じ機能モジュールに対して比較的統一された CSS 名を使用するのが最善です。問題を解決するためにスタイル名を定義できる場合は、複数のスタイル名を定義しないようにし、コードはできるだけ簡潔にする必要があります。コードが肥大化しているため、間違いが発生しやすく、どこにエラーがあるのか​​を見つけるのが困難です。 menu、menu_ul、menu_ul_li など、明確に組織化されて階層化されているように見えても、実際には非常にわかりにくいスタイルを定義する代わりに、menu、menu_ul、menu li、menu a、menu a:hover などの一連のスタイルを使用します。

習慣とは、過去の経験が潜在意識に蓄積されたものですが、テクノロジーの進歩により、多くの過去の習慣がさらなる改善の障害となっている現在、基準を参照して、問題を解決する必要があります。過去 習慣は続ける価値がありますか? Web サイトの作成も同様で、標準化によって効率が向上し、パフォーマンスが向上し、方向性が示され、Web のデザインが標準化されることで、Web サイトの維持効率の向上に役立ちます。