プロが教えるわが家の防犯対策術!

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

縦に並んだリストを、右揃えにしたいです。
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>

このQ&Aに関連する最新のQ&A

A 回答 (3件)

#1です。


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

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

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

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

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

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

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


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

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

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

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

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

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

このQ&Aに関連する人気のQ&A

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

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qリストを全体的に右寄せにしたい。

リストを横並びにしました。
これを大きいdivで囲んだ中の右寄せにするにはどうしたらよいのでしょうか。

#ex {
width: 100%;
background-color: #66CCFF;
height: 28px;
}
#ex ul {
list-style: none;
}
#ex li {
margin: 0px;
padding: 5px 0px 5px 30px;
list-style: none;
float: left;
background: url(***.gif) no-repeat 10px 0.5em;
}

<div id="ex">
<ul>
<li><a href="#">リスト</a></li>
<li><a href="#">リスト</a></li>
</ul>
</div>

Aベストアンサー

ulにfloat:rightを設定してみは?

#ex ul {
list-style: none;
float:right;
margin: 0px;
padding: 0px;
}

Qdivタグ内のコンテンツが重なって表示されてしまう。

下記のようなHTMLを表示させるときに
IEでは上下に並んで表示されるのですが、FF、Operaなどでは重なって表示されてしまいます。
どうしたら、上下に並べて表示させられますか?

<div id="a">
<div id="b">
<ul>
<li>重なってしまう文字列</li>
<li>重なってしまう文字列</li>
</ul>
</div>
</div>
<table>
<!-- このテーブルタグの上に重なって表示されてしまう -->
</table>

Aベストアンサー

CSSのどの部分かよくわからないなら
タグで指定したstyle属性の方が優先するはずだから
style="position:relative;clear: both;"
で直接打ち変えてしまえば。

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Qcss固定したフッターが本文と重なってしまいます

#all { height:100%; min-height:100%; }
#header { left:150px; position:absolute; }
.main { top:60px; left:150px; position:absolute; }
#footer { left:150px; bottom:0px; position:absolute; }
-------------------------------------------------------------
<div id="all">
<div id="header">
ヘッダ部
</div>
<div class="main">
メインの記事
</div>
<div id="footer">
フッター
</div>
</div>
==============================================================
このように指定したのですが、
ウィンドウを小さくしたり、長い文を書いたりすると、
メインの記事がフッターと重なって読めなくなってしまいます。
記事が短い時は、ページ全体の下部に、
長い時はスクロールした一番下にくるようにしたいです。
テーブルのheight指定を使えば同じような効果は得られますが、
テーブルの無いレイアウトをやってみたかったので。
同じような質問は発見したのですが、いい解答が見つかりませんでした。

#all { height:100%; min-height:100%; }
#header { left:150px; position:absolute; }
.main { top:60px; left:150px; position:absolute; }
#footer { left:150px; bottom:0px; position:absolute; }
-------------------------------------------------------------
<div id="all">
<div id="header">
ヘッダ部
</div>
<div class="main">
メインの記事
</div>
<div id="footer">
フッター
</div>
</div>
==============================================================
このように指定...続きを読む

Aベストアンサー

何度もゴミ回答ばかりしてすみません。これが最後です。
メインの記事とフッターの重なりは、一応、防げました。
しかし、スクロールバーが操作できません。中途半端です。
益子貴寛氏の調査では、IE6.0のサポートは不完全となっています。
また、氏は、フレームの代行手段と言明されています。
こういう調査結果からすると、フレームという手段しかなさそうです。
Overflowについては、下記を参照して下さい。

CSS2 11.その他の視覚効果
11.1 はみ出しと切り抜き(Overflow ans clippin)
11.1.1 はみ出した内容の扱い(Overflow)
scroll 内容を切り抜く。

次に、オーバーラップを回避した書き方を一応示しておきます。
Left<br/>を追加して、スクロールバーが出ることをご確認下さい。

<!DOCUTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
  <TITLE>Test</TITLE>
  <STYLE type="text/css">
  #left {
  position:absolute;
  top: 130px;
  left: 100px;
  width: 300px;
overflow-y: scroll;
  }
  #main {
  position:absolute;
  top: 130px;
  left: 400px;
  }
  #right {
  position:absolute;
  top: 130px;
  left: 700px;
  }
  #footer {
  position:absolute;
  bottom: 0px;
  left: 100px;
  }
  </STYLE>
</HEAD>
<BODY>
<div id="left">
 left<br/>
</div>
<div id="main">
 main
</div>
<div id="right">
 right
</div>
<div id="footer">
 footer
</div>
</BODY>
</HTML>

何度もゴミ回答ばかりしてすみません。これが最後です。
メインの記事とフッターの重なりは、一応、防げました。
しかし、スクロールバーが操作できません。中途半端です。
益子貴寛氏の調査では、IE6.0のサポートは不完全となっています。
また、氏は、フレームの代行手段と言明されています。
こういう調査結果からすると、フレームという手段しかなさそうです。
Overflowについては、下記を参照して下さい。

CSS2 11.その他の視覚効果
11.1 はみ出しと切り抜き(Overflow ans clippin)
11.1.1 はみ出...続きを読む

Qfloat:left; したものを右寄せ

<div style="text-align:right;">
<ul>
<li style="float:left;">リスト</li>
<li style="float:left;">リスト</li>
<li style="float:left;">リスト</li>
</ul>
</div>

リスト要素を横に並べるようにfloat:left;をいれたものを、
画面右寄せにするにはどうすればいいでしょうか。
上のソースではtext-align:right;が効かず左よせになってしまいます。。
よろしくお願いいたします。

Aベストアンサー

<ul style="float:right;">
<li style="float:left;">リスト1</li>
<li style="float:left;">リスト2</li>
<li style="float:left;">リスト4</li>
</ul>
で、どうでしょう?

Qリストの左余白の削除方法

<li>リストを作成した再に表示されてしまう、左余白部分を削除して、画面左に詰めたいのですが、上手く出来ません。
どなたかご教授頂けませんでしょうか?

=>CSS記述<=
ul li {
list-style: none;
margin: 0px;
padding: 0px;}

=>HTML記述<=
<ul>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
</ul>

Aベストアンサー

ul li {

の箇所を

ul {

にするだけ

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">

Qスペースを使わず文字位置を揃える方法

素人な者で大変申し訳ありません
以下のように、複数行の文字位置を揃えるタグはどうなるのでしょうか?
(下の例は揃っていませんが・・・)

1.あ        :ABC
2.abc       :ABC
3.あいう      :ABC
4、えお       :ABC

のように、空白部にスペースを使わずに文字位置を揃える方法です
ワードなどの「tabキー」の役割をするタグなんてありますか?

ご教示の程、宜しくお願い致します

以上

Aベストアンサー

 これは、No.がある序列リストですか?あるいは、用語とその説明のようなものでしょうか?
 HTMLは、その文書構造を記述するだけですので、それにしたがってマークアップすれば良いです。
[例][用語とその説明のようなもの]のようですから定義リストでマークアップしてみましょう。
<h3>元素</h3>
<dl class="periodic table">
<dt>水素</dt>
<dd>元素記号(H)、原子量1.008、酸素と共に水をくつる。</dd>
<dt>ヘリウム</dt>
<dd>元素記号(He)、原子量4.003、不活性ガス</dd>
<dt>リチウム</dt>
<dd>元素記号(Li)、原子量6.941、リチウムイオン電池</dd>
</dl>

<h3>元素</h3>
<ol class="periodic table">
<li><span class="element">水素</span>元素記号(H)、原子量1.008、酸素と共に水をくつる。</li>
<li><span class="element">ヘリウム</span>元素記号(He)、原子量4.003、不活性ガス</li>
<li><span class="element">リチウム</span>元素記号(Li)、原子量6.941、リチウムイオン電池</li>
</ol>

これに対して、スタイルシートを次のように書いたりします。
dl.periodic.table{counter-reset: atomicNum 0;padding-left:2em;}
dl.periodic.table dt{float:left;font-weight:bold;}
dl.periodic.table dt:before{
content: counter(atomicNum) ". ";
counter-increment: atomicNum;
}
dl.periodic.table dd{margin-left:7em;}
dl.periodic.table dd:before{content:": ";}

ol.periodic.table span.element{float:left;width:7em;position:relative;font-weight:bold;}
ol.periodic.table span.element:before{content:": ";position:absolute;right:0.5em;}

★他にどのようにマークアップされていても、用語とその説明がが区別できるようにマークアップされていれば、デザインはできます。
★デザインのためにDIVやSAPNを追加しているわけではありません。
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』ものです。デザインのために書いてしまうと、デザインのためにtableを使ったのと大差ありません。
 HTML5では、
※DIVやSPANは他に適した要素がないときのための最後の手段
※文書構造を示すため
 となります。

 これは、No.がある序列リストですか?あるいは、用語とその説明のようなものでしょうか?
 HTMLは、その文書構造を記述するだけですので、それにしたがってマークアップすれば良いです。
[例][用語とその説明のようなもの]のようですから定義リストでマークアップしてみましょう。
<h3>元素</h3>
<dl class="periodic table">
<dt>水素</dt>
<dd>元素記号(H)、原子量1.008、酸素と共に水をくつる。</dd>
<dt>ヘリウム</dt>
<dd>元素記号(He)、原子量4.003、不活性ガス</dd>
<dt>リチウム</dt>
<dd>元素記号(L...続きを読む


人気Q&Aランキング