wordpressテーマstinger5でサイトを構築しています。
(やりたい事)
ヘッダーナビゲーションをヘッダー画像と同じ幅で表示して、メニューの数
だけ均等に区間を割りたい。
(今の状況)
cssをいじるも思い通りにいかない。
デフォルトのナビゲーションのcssです。
↓
lang
1nav li { 2 position: relative; 3 float: left; 4 font-size: 13px; 5 padding-left: 10px; 6 display: inline; 7 padding-right: 10px; 8 border-left-width: 1px; 9 border-left-style: dotted; 10 border-left-color: #CCC; 11 padding-top: 5px; 12 padding-bottom: 5px; 13} 14nav li li { 15 float: left; 16 font-size: 13px; 17 padding-left: 10px; 18 display: inline; 19 padding-right: 10px; 20 padding-top: 5px; 21 padding-bottom: 5px; 22 border: none; 23} 24nav li a { 25 float: left; 26 color: #333; 27 text-decoration: none; 28} 29.menu-navigation-container { 30 overflow: hidden; 31} 32nav li a:hover { 33 text-decoration: underline; 34} 35nav li li { 36 float: left; 37 font-size: 13px; 38 padding-left: 10px; 39 display: inline; 40 padding-right: 10px; 41 padding-top: 5px; 42 padding-bottom: 5px; 43 border: none; 44} 45nav li a { 46 float: left; 47 color: #333; 48 text-decoration: none; 49} 50.menu-navigation-container { 51 overflow: hidden; 52} 53nav li a:hover { 54 text-decoration: underline; 55} 56コード
まず、疑問点が二つありました。
なぜ nav liセレクターにdisplay: inline;
が設定されているのか、そこは自分はdisplay: blockだと思っていたのですが、、、、
もう一つはなぜ nav li li というセレクターがあるのか、liが入れ子になっているようなとこはないのですが、、、
疑問をもちつつ以下を追加してみました、```lang-<
nav ul {
width: 220px;>
コード
(私のサイトはwidthが1100で、5つで割りたい為,width220pxと指定) 結果、5つに割れたのですが、少しウィンドウを小さくするとメニューが一つ下 の段に移動したりレイアウトが崩れました。 うまく出来る方法を教えてください。 できれば私の疑問点2つも解決していただけるとありがたいです。 よろしくお願いします。
回答4件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/06/27 06:49