タグ

ブックマーク / nelog.jp (1)

  • WordPressグローバルナビの横並びメニューをFlexBoxで均等幅表示する方法

    メニューを1列に均等幅表示する方法 グローバルナビのメニューを1列に均等幅表示するには、簡単に書くと以下のような設定を追加する形になります。(※CSSセレクタは、テーマのものに合わせてください。) #navi ul{ display: flex; /*フレキシブルボックス*/ text-align: center; /*センタリングは好みで*/ } #navi ul li{ width: 300px; /*幅は大きめに調節する*/ } テキストのセンタリングが不要ならば、ulとliにそれぞれ1つずつプロパティーを追加設定するだけで均等幅表示を実現することができます。なんて簡単。 動作確認すると、こんな感じに表示されます。 ただ、Can I use…で確認してみると、FlexBoxは、現行のモダンブラウザでは、ほぼ利用できるようですが、Safariなどは「-webkit-」のようにベンダープ

    WordPressグローバルナビの横並びメニューをFlexBoxで均等幅表示する方法
  • 1