※ ChatGPTを利用し、要約された質問です（原文：横並びのメニューボタンについて）
横並びのメニューボタンの表示方法について
このQ&Aのポイント
横並びのメニューボタンについてfloat:leftでメニューボタンを横並びにしています。表示を100％にするとうまく並ぶのですが、100％以上にすると左端に隙間が、100％未満にすると、ある時点からメニューボタンが2列になってしまいます。
表示を100％にするとうまく並ぶのですが、100％以上にすると左端に隙間が、100％未満にすると、ある時点からメニューボタンが2列になってしまいます。
メニューボタンを横並びにする方法について調べています。表示を100％にするとうまく並ぶのですが、100％以上にすると左端に隙間が、100％未満にすると、ある時点からメニューボタンが2列になってしまいます。回避方法を教えてください。
float:leftでメニューボタンを横並びにしています。
表示を100％にするとうまく並ぶのですが、
100％以上にすると左端に隙間が、
100％未満にすると、ある時点からメニューボタンが2列になってしまいます。
これを回避する方法はあるでしょうか。
<<html>>
<body>
<div id="wrap">
<img src="image/photo1.jpg">
<div id="navi"> <!-- ナビボタン ここから -->
<ul class="menu">
<li><a href="index.html" >ホーム</a></li>
<li><a href="page1.html" >ページ１</a></li>
<li><a href="page2.html" >ページ２</a></li>
<li><a href="page3.html" >ページ３</a></li>
<li><a href="page4.html" >ページ４</a></li>
<li><a href="page5.html" >ページ５</a></li>
</ul>
</div> <!-- /navi -->
</div> <!-- /wrap -->
</body>
<<css>>
body {
text-align: center;
background-color:#EEEEEE;
font-size: 12px;
margin-top: -10px
}
#wrap{
margin: 0 auto;
text-align: left;
background-color: #ffffff;
width: 752px;
border: 1px solid #404040;
border-collapse: collapse;
padding: 0;
}
.navi{
width:750px;
}
ul.menu {
margin: -5 0 0 0px;
padding :0;
list-style-type : none;
}
ul.menu li {
margin:0;
float:left;
width: 125px;
line-height: 30px;
}
ul.menu li a{
display:block;
text-align:center;
text-decoration: none;
background-image: url(menu1.jpg);
background-repeat: no-repeat;
color: #ffffff;
font-size: 12px;
}
ul.menu li a:hover{
background-image: url(menu2.jpg);
color: #404040;
}
よろしくお願いします。
お礼
質問した後、いろいろと手直ししていたところ、 改善していました・・・。 意味不明の文で申し訳ありませんでした。 プロではありませんので、これでいいのだろうか？これでいいのだろうか？と 不安に駆られつつ試行錯誤しながら作り上げています。 なので、なにそれ？と聞かれると答えられません・・・（苦） できる方から見たら、なんじゃこりゃ？というモノだと思います。
補足
ご回答いただきましたのはありがたいですが、 馬鹿にされていらっしゃるのでしょうか。 気持ちがよくありません。 ご質問に関する答えですが、 ここに記載するにあたって書き換えていますので、 意味不明な文になっていたようです。