- ベストアンサー
リスト表示を左に寄せたい
いつもお世話になります。 下記のようなCSSで縦並びのリスト表示をさせていますが、 どうしてもリスト（全体）が左に寄らないので困っています。 できたらボックス（id-=navi）の左から10ピクセルぐらいのところから リストを始めたいのですが・・・ （ちなみに3段組みの一番左のボックスです） 現在はおそらく30pxくらいのところから始まっていて、何をしてもうごきません。 よろしくお願いします。 ---------CSS------------------ #wrapper { width: 855px; background-color:#A96223; } #main{ float:left; width:675px; background-color:#EBE3BE; } #navi{ float:left; width:150px; background-color:#A96223; padding-top:20px; padding-left:10px; text-align:left; margin: 0px; } #advertisement{ float:right; width:30px; background-color:#A96223; } #footer{ clear:both; background-color:#804C2E; height:20px; } #navi ul{ list-style:none; margin:0px; padding:0px; } #navi li{ list-style:none; color:#FFFFFF; margin-left:0px; padding-left:10px; line-height:10px; background-image:url(img/common/yajirushi.gif); background-repeat:no-repeat; background-position:left center; } --------------html---------------------- <body> <div id="wrapper"> <div id="navi"> <ul> <li>TOP</li><br /> <li>新着情報</li><br /> <li>おすすめメニュー</li><br /> <li>ご宴会・パーティー</li><br /> <li>お店のご案内</li><br /> <li>イベントご案内</li><br /> <li>お得クーポン</li><br /> </ul> </div> <div id="main"> <br /><br /><br /><br /><br /><br /><br /><br /> </div> <div id="advertisement"> <br /><br /><br /><br /><br /><br /><br /><br /> </div> <div id="footer"> </div> </div> </body>
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
四角い部分のデザインはブロックの方が装飾が巧みにできると思います。 (1)ulとli#naviはブロックにしてください。（display:block;） (2)ulのパッディングを10ｐｘにしてください。 (3)liのパッディングは0ｐｘにしてください。 (4)liのbrは不要で、marginで間隔調整してください。 このようにしてデザインできませんか？
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
ちゃんと理解してませんが… とりあえず、左側の空きを指定しているものを探すと、 #navi の padding-left:10px; と #navi li の padding-left:10px; なので 両方とも0にしてみるとリストは<div id="navi">の左端から始まります。 どちらの指定を生かすのかは、全体のレイアウトによると思いますので、ご自信で判断してください。
お礼
早々のご回答ありがとうございます。 結局昨日はあきらめて本日一から作り直してみたらできました。 その際、ご回答いただいたことを参考にさせていただきました。 本当にありがとうございました。
お礼
真夜中のご回答、ありがとうございます！ 結局一から作り直してみたらできました。その際いろいろ御指摘いただいたことを参考にさせていただきました。 display:blockは使い方がいまひとつよくわからないのですが、 こういう風に使うんですねぇ。 本当にありがとうございました。