wardpress テーマstinger5のナビゲーションをカスタマイズしたい。

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つに割れたのですが、少しウィンドウを小さくするとメニューが一つ下
の段に移動したりレイアウトが崩れました。

うまく出来る方法を教えてください。
できれば私の疑問点２つも解決していただけるとありがたいです。
よろしくお願いします。

行動規範の内容に同意します

回答4件

インライン要素は、widthとheight指定できないようですが、
親要素でtext-alignを使えるようになるということで、
今回もその理由で、display:inlineになってるみたいですね
今回は、display:inline-blockでもいいかもしれませんね。
これは、imgと同じようになるそうで、
imgはwidth指定でき、また、親要素にtext-alignを指定できます
ただし、昔のブラウザでバグがあるようです。

投稿2015/06/25 00:20

編集2015/06/25 01:03