- ベストアンサー
css リストを右揃えにできません。。。
非常にシンプルなことができず、頭を抱えています。 縦に並んだリストを、右揃えにしたいです。 ulに便宜的にborderをつけていますので、 そのボックスの右にピッタリ並べたいのですが … text-align、margin 二通りの指定で試したものの 左揃えになってしまいます（Mac safari firefox）。 なんで～～？？ どなたかドウゾ助けてください。よろしくお願いします。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style><!-- *{ margin:0; padding:0; } ul.align { list-style:none; text-aling:rignt; width:200px; border:1px solid #000;} ul#margin li { list-style:none; margin-left:auto; margin-right:auto;} --></style> </head> <body> <ul class="align"> <li><a href="" title="">AA</a></li> <li><a href="" title="">BBBBB</a></li> <li><a href="" title="">CCC</a></li> <li><a href="" title="">DDDD</a></li> </ul> <ul class="align"> <li>AA</li> <li>BBBBB</li> <li>CCC</li> <li>DDDD</li> </ul> <ul id="margin"> <li><a href="" title="">AA</a></li> <li><a href="" title="">BBBBB</a></li> <li><a href="" title="">CCC</a></li> <li><a href="" title="">DDDD</a></li> </ul> </body> </html>
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
#1です。 marginを使う場合はブロックの右寄せになるので、 text-alignと同じ結果は得られません。 ブロックを右寄せにしたければ、 ・ブロックの幅(width)を指定する。 （どうしたいかにもよりますが、LIのみ、あるいはULとLIの両方に） ・margin-rightはautoではなく0。 (余白が要るなら0じゃなくてもいいけど、とにかくauto以外)
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
ulに指定したって、liに継承されません。 liはブロック要素なのでliについて設定する必要あります。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style><!-- body,html{ margin:0; padding:0; } ul{ padding-left:0px; margin-left:0px; } ul.align{ width:200px; border:1px solid #000; } ul.align li{ display:block; list-style:none; /* IEバグ対策 */ text-align:right; } ul#margin li{ display:block; /* IEバグ対策 */ list-style:none; } --></style> </head> <body> <ul class="align"> <li><a href="" title="">AA</a></li> <li><a href="" title="">BBBBB</a></li> <li><a href="" title="">CCC</a></li> <li><a href="" title="">DDDD</a></li> </ul> <ul class="align"> <li>AA</li> <li>BBBBB</li> <li>CCC</li> <li>DDDD</li> </ul> <ul id="margin"> <li><a href="" title="">AA</a></li> <li><a href="" title="">BBBBB</a></li> <li><a href="" title="">CCC</a></li> <li><a href="" title="">DDDD</a></li> </ul> </body> </html> ☆*{margin:0px;padding0px;}は、IEのhtml.bodyの解釈への対策でしょうが、どこで始まったのか知らないけど、body,htmlだけに設定しておいたほうが、CSSはスリムに出来るはず。
お礼
質問外のことまでいろいろと教えていただき、 ありがとうございます！ とても勉強になりました
- steel_gray
- ベストアンサー率66% (1052/1578)
スタイルシートに単純なスペルミスがあります。 Firefoxなら ツール＞エラーコンソール で、CSSのエラーが確認できます。 Safariについてはわからないけど、同じよう機能があったはず。
お礼
！！自分であっけにとられました。。。 ありがとうございます。。。 text-aling:rignt; ＞＞ text-align:right; でalign側は右寄せできました！ありがとうございます ただ（cssエラーは無くなったのですが） marginによる設定の方は、できません もしお分かりになれば、お願いします
お礼
教えていただいた方向で挑戦してみます margin-rightも0のつもりがautoと書いていて… テストのつもりが誤記だらけで情けなくなりました。。 本当にありがとうございました！