- 締切済み
<li>の先頭に出るスペースの埋め方を教えてください！
DWを使いリストでロールオーバリンクするメニューを作っているのですが、どういうわけか最初の<li>の前に大きなスペースが出てしまします。また、FireFoxで確認をすると、メニューが入っているdiv(#navigation)の上に空白が出来てしまいます。この問題を解決するにはどうすればいいのでしょうか？ ちなみにHTMLは↓ <body> <div id="all"> <div id="header"></div> <div id="navigation"> <ul class="sample"> <li><a href="#" class="sample">top</a></li> <li><a href="#" class="sample">top</a></li> <li><a href="#" class="sample">top</a></li> <li><a href="#" class="sample">top</a></li> <li><a href="#" class="sample">top</a></li> <li><a href="#" class="sample">top</a></li> </ul> </div> <div id="main"></div> <div id="main2"></div> <div id="footer"></div> </div> </body> ---------------------------- そしてスタイルシートは↓ #all { background-color: #00FF00; width: 750px; position: relative; height: auto; margin-right: auto; margin-left: auto; } #navigation { background-color: #FF0000; height: 50px; width: 750px; position: relative; clear: right; } #main { height: 270px; width: 750px; position: relative; background-color: #FFFF99; } #footer { background-color: #999999; height: 50px; width: 750px; position: relative; clear: right; } #ul.sample { width: 100%; } #header { background-color: #999933; height: 200px; width: 750px; position: relative; clear: left; } a.sample { text-align: center; font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: 16px; text-decoration: none; color: #FFFFFF; background-image: url(img/blue-spy.JPG); height: 35px; width: 125px; padding-top: 15px; float: left; } a:hover.sample { background-image: url(img/sky.jpg); } ul.sample li { list-style-type: none; float: left; } #navigation li { float: left; height: 50px; width: 125px; } です。 本当に困っています。分かる方いましたらぜひ教えて頂けませんでしょか？
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- seta_takahiro
- ベストアンサー率60% (23/38)
スタイルシートとして ul { margin: 0px; /* または padding: 0px; または両方 */ } を設定したらどうなるでしょうか？ ul のかわりに div, li でやったらどうなるでしょうか？
- uskt
- ベストアンサー率49% (361/733)
左側に空白ができてしまうのは、現在のブラウザの解釈がそうなってるからではないかと思うのですが、直接的にどう直せばいいのかは、わかりません。 対症療法としては、CSSか、ULタグのところで、左マージンを指定してしまえばいいのではないでしょうか。たとえば、 <ul style="margin-left:10px;"> のようにすれば、各LIの左側は揃えられます。
お礼
<ul style="margin-left:10px;">を早速試したところ、各liの左側をそろえることに成功できました★ usktさんの早急な回答、本当にうれしかったです！ どうもありがとうございました！
お礼
ありがとうございます！ さっさくやってみたらズバッと解決ができました！！ ２日間ほどこの問題で頭をなやませており、ずっとしこりがとれないままだったのですが、おかげでスッキリできました！ 本当に助かりました！！ 本当にどうもありがとうございました！！！