- ベストアンサー
ブロック単位の右寄せにする方法を教えてください
- ブロック単位で文字を右寄せにするためには、div要素を使用し、その中にテキストを配置します。
- また、リンクとして予定している部分の幅が決まっていない場合は、JavaScriptやPHPの関数を使用して幅を自動調整することが可能です。
- 対象ブラウザはIE6以上、Firefox、Operaなどをサポートしています。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
こういうときは以下のようにします。 css ------------------ div.link1{ text-align:right; padding:0.5em 0 1em auto; } div.link1 a{ background:url(****) center left no-repeat; padding-left:15px; } html ------------------------ <div class="link1"><a href="">～～～はこちら</a></div> aタグはインライン要素なので、文字列の幅＝aタグの幅(厳密にいうと幅はないのですが)になります。
その他の回答 (3)
- zeff
- ベストアンサー率69% (137/198)
リンクを張る予定ならAの背景画像にしてしまえばOKでは？ text-align:rightで右に寄っても背景位置は動かないはず。 a以外のインライン要素でもできると思いますが。 ※IE6はもう使っていないので未検証です。 <style type="text/css"> <!-- html,body{margin:0;padding:0;} .wrapper{width:700px;} .link1{ text-align:right; padding:0.5em 0 1em auto; width:100%; } .link1 div a{ background-repeat:no-repeat; background-image:url(***); background-position:center left; text-align:right; padding-left:15px; } --> </style> </head> <body> <div class="wrapper"> <div class="link1"> <div><a href="hoge.html">ほげほげはコチラ</a></div> </div> <div class="link1"> <div><a href="fuga.html">ふがふがふがふがはコチラ</a></div> </div> </div> </body> </html>
お礼
ありがとうございました。遅くなってすいません。
- karita_83
- ベストアンサー率45% (39/86)
見直しをせずに送ってしまい・・・申し訳ございません・・・。 第二案の text-indent:-9999px; ですが これだとtext-align:right; だと上手くいかなかったです・・・。 正しくは height:0; padding-top:画像の高さ; overflow:hidden; です。 何度も申し訳ございません
補足
早速ありがとうございます。 アイディアとしてはすごくありがたかったのですがアイコンの上寄せが避けられず「アイコン」の文字が出てきてしまい（IE8、Firefox）他verIEでもうまく調整ができないようです。 かなりの箇所に同じものが出てくるため背景指定です。
- karita_83
- ベストアンサー率45% (39/86)
画像は背景にしなくてはいけないのでしょうか？ パッと思いついたのが <div class="link1"><img src="イメージ"><a href="#">○○○</a></div> div.link1 { text-align:right; padding:0.5em 0 1em auto; width:100%; } div.link a { padding-left:15px; } で似た感じが実装できるかなぁと思ったのですが・・・。 どうしても背景画像にしなくてはいけないのであれば <div class="link1"><span>アイコン</span><a href="#">○○○</a></div> div.link1 span{ text-indent:-9999px; width:○○px; height:○○px; background:url(); } なんていうのも思いつきました。 ご希望と違ったらスミマセン・・・
お礼
ありがとうございました。遅くなってすいません。
お礼
ありがとうございました。お礼が遅くなり申し訳ありません。