プロが教える店舗＆オフィスのセキュリティ対策術

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

解決済

  • 質問者：asummer
  • 質問日時：
  • 回答数：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><!--
*{ 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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.1

  • 回答者： steel_gray
  • 回答日時：

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


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

Safariについてはわからないけど、同じよう機能があったはず。
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

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

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

通報する
お礼日時：2009/03/02 17:38

No.2

  • 回答者： ORUKA1951
  • 回答日時：

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><!--
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はスリムに出来るはず。
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2009/03/02 19:27

No.3ベストアンサー

  • 回答者： steel_gray
  • 回答日時：

#1です。


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

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

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

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

通報する
お礼日時：2009/03/02 19:29

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

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報