Habakiriのメニューを均等割にする方法

habakari

Habakiriのメニュー「2行」「中央ロゴ」で使用する時に、メニューの幅が均等でないので均等にする方法を紹介します。

 
[スポンサーリンク]


 

変更前

Habakiriのメニュー変更前

 

横並びリストを使う時を、table-cell【css】を使って自動的に均等になるようにしようと試したのだが上手くいかなかったので幅を指定して変更しました。

iPadを横にした時に表示が崩れないようにMedia Queries(メディアクエリ)で調整してます。

width: 190px; は、メニューの数により変更してください。

 
 

CSS

	
 @media screen and (min-width: 1025px) {
        .menu li {
            border-left: 1px solid #ccc;
            border-right: 1px solid #ccc;
			width: 190px;
        }
    }
	

 
 

変更後

Habakiriのメニュー変更後

これで、BizVektor(ビズベクトル)のような企業サイト向けのホームページにも使用しやすいです。

 

この投稿へのコメント

コメントはありません。

コメントを残す