li ul横並びについて

質問

横並びのメニューを表示させるところまでは出来たのですが、ウィンドウを縮小させると画像の通りリストが画面に合わせてズレてしまいます。

CSSはこのように書いています。
ul.menu{
list-style:none;
width:100%;
font-size:25px;
//margin-left:0px;
//margin-top: 642px;
position: relative;
top: 642px;
right: 27px;
padding:3px 0px;
text-align:center;
font-family: 'Gorditas', cursive;
}

ul.menu li{
list-style:none;
display:inline;
margin:0px 15px;
}

ウィンドウを縮小しても横並びのままにはならないのでしょうか？まだまだ勉強途中なのでわかりやすく教えて頂けるとありがたいです。

この投稿のマルチメディアは削除されているためご覧いただけません。

回答No.2

ORUKA1951 · ベストアンサー

＞リストが画面に合わせてズレてしまいます。
　ユーザービリティを考えると、それがベストだと思います。もし、一列に並んだままだと
・画像の大きさを小さくしてウィンドウ内に納めようとすると、画像が小さくなり判読しづらく、またポインターを合わせづらくなる。
・画像の大きさを保ったままだと横スクロールしなければ、すべてを見づらくなる。
　のいずれかの問題を抱えることになります。

　また、ulに対してposition:relativeを指定されて、かつtop,rightでずらしていますが、そうすると本来の位置にulがあるように、後続の要素が配置されます。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
relative
　ボックスの位置はまず通常フローにて計算され（この計算で得られた位置を通常位置と呼ぼう）、その通常位置から相対的に配置される。 なお、あるボックスBが相対配置される場合、それに後行するボックスの位置は、Bが相対配置されていないかのように計算される。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［視覚整形モデル( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html#choose-position )］より

　なお、現在ウェブ標準とみなされているCSS2.1では、displayの値がCSS2よりも増えています。
　 [CSS2]　　　　　　　[CSS2.1]
inline　　　　　　　　inline
block　　　　　　　　 block
list-item　　　　　　 list-item
run-in　　　　　　　　破棄　CSS3で導入？
compact　　　　　　　 破棄　CSS3で導入？
-----　　　　　　　　 inline-block
marker　　　　　　　　破棄　CSS3で導入？
table　　　　　　　　 table
inline-table　　　　　inline-table
table-row-group　　　 table-row-group
table-header-group　　table-header-group
table-footer-group　　table-footer-group
table-row　　　　　　 table-row
table-column-group　　table-column-group
table-column　　　　　table-column
table-cell　　　　　　table-cell
table-caption　　　　 table-caption
none　　　　　　　　　none
inherit　　　　　　　 inherit

　よって、もしリストの項目を画像で表示されているなら、display:inline-block;が本来設定すべきプロパティですが、そうすると古いブラウザは対応していません。

ul.menu,ul.menue li{display:block;list-style:none;}
ul.menu,ul{width:100%;position: relative;padding:3px 0px;text-align:center;
font-family: 'Gorditas', cursive;
}
ul.menu li{
display:inline-block;margin:0px 15px;
}
ul.menu li a img{display:block;width:11%;height:auto;}

お礼

前回に続き詳しい回答有難う御座います。
なるほど…ポインタを合わせづらくなるのはちょっとですね…。
現状維持にとりあえずすることにします。
positionもまだまだ勉強途中なので色々と教えて頂きありがとうございました！

補足

質問続きで申し訳ありません。
上記CSSの内容ですが、CSSの方もバージョンの宣言等をしないといけないのでしょうか？
今のところHTMLの方でのバージョン宣言しかしていないもので、もし宣言をした場合バージョンに合わせて破棄されたものは使用してはならないのでしょうか？

回答No.3

ORUKA1951

＞上記CSSの内容ですが、CSSの方もバージョンの宣言等をしないといけないのでしょうか？

　必要ありません。スタイルシートはブラウザは可能なものから適時導入して良いことになっています。これは、HTMLとは少し違います。HTML5の文書宣言と同じと考えて良いでしょう。

お礼

なるほど…特に気にしてやるものではないのですね。
回答有難う御座いました。

回答No.1

lilillllililili

つまり、ウィンドウサイズを小さくしても途中で改行されないようにすれば良いのですね。
ページ全体の横幅を決めてあげれば解決するとおもいます。
幅が可変になるレイアウトをされているのでしたら、min-widthで最小値を指定すると良いです。

<style>
body{ text-align: center; }
div{ text-align: left; }
#main{
width: 1000px;
margin: auto;
}
</style>
<div id="main">
サイト内容
</div>

お礼

回答有難う御座います。
ページ全体の幅を決める宣言があるのですね！勉強になります。
min-widthは知らなかったので、これら調べてみることにします。
有難う御座いました！