css リストを右揃えにできません。。。

解決済

質問者：asummer
質問日時：2009/03/02 17:05
回答数：3件

非常にシンプルなことができず、頭を抱えています。

縦に並んだリストを、右揃えにしたいです。
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-transitio …
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style></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件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： steel_gray
回答日時：2009/03/02 19:03

#1です。

marginを使う場合はブロックの右寄せになるので、
text-alignと同じ結果は得られません。

ブロックを右寄せにしたければ、
・ブロックの幅(width)を指定する。
（どうしたいかにもよりますが、LIのみ、あるいはULとLIの両方に）
・margin-rightはautoではなく0。
(余白が要るなら0じゃなくてもいいけど、とにかくauto以外)

- 2
- 件

通報する

この回答へのお礼

教えていただいた方向で挑戦してみます
margin-rightも0のつもりがautoと書いていて…
テストのつもりが誤記だらけで情けなくなりました。。

本当にありがとうございました！

通報する

お礼日時：2009/03/02 19:29

No.2

回答者： ORUKA1951
回答日時：2009/03/02 18:21

ulに指定したって、liに継承されません。

liはブロック要素なのでliについて設定する必要あります。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style></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はスリムに出来るはず。

- 0
- 件

通報する

この回答へのお礼

質問外のことまでいろいろと教えていただき、
ありがとうございます！
とても勉強になりました

通報する

お礼日時：2009/03/02 19:27

No.1

回答者： steel_gray
回答日時：2009/03/02 17:14

スタイルシートに単純なスペルミスがあります。

Firefoxならツール＞エラーコンソール
で、CSSのエラーが確認できます。

Safariについてはわからないけど、同じよう機能があったはず。

- 0
- 件

通報する

この回答へのお礼

！！自分であっけにとられました。。。
ありがとうございます。。。

text-aling:rignt;　＞＞　text-align:right;
でalign側は右寄せできました！ありがとうございます

ただ（cssエラーは無くなったのですが）
marginによる設定の方は、できません
もしお分かりになれば、お願いします

通報する

お礼日時：2009/03/02 17:38

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！