- ベストアンサー
要素をインライン要素にしての右寄せの方法
- 要素をインライン要素にして画像やリンクと並列し、右寄せする方法について教えてください。
- HTMLファイル内の指定要素をインライン要素に変更し、画像やリンクと並列した右寄せを実現する方法はありますか？
- 画像やリンクと並列し、要素をインライン要素に変更して右寄せする方法を教えてください。
- HTML
- 回答数2
- ありがとう数6
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
きちんと仕様書くらいは読んでおきましょう。 そもそも、CSSをきちんと適用させるためには正しくマークアップされたHTMLが必要です。 されたいことは、画像をリストのマークにしたリンクリスト(ナビゲーションリスト)だと思いますから、 <ul class="nav"> <li><a href="">リンク</a><span>あいうえお</span></li> <li><a href="">リンク</a><span>あいうえお</span></li> ・・・・ <ul> とマークアップすべきですね。全くスタイルシートを使わないときでも文書の構造が分かるようにマークアップするのがHTMLの基本中の基本です。この場合<p></p>内に書かれている情報は別段落ではないですから、<p>paragraph・・段落でマークアップするのは間違いです。 そのうえで、たとえば次のようにスタイルシートを書きます。そのほうが簡単ですね。 サンプルHTML 4.01Strictです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>見本</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- ul.nav{ list-style-image: url("http://cmm001.goo.ne.jp/img/logo/goo.gif"); margin-left:auto; margin-right:auto; width:300px; line-height:2ex; } ul.nav li{width:100%; position:relative;padding-left:10px;margin-bottom:1ex;} ul.nav li a{position:relative;top:-1.5ex;} ul.nav li span{display:block;position:absolute;right:0px;top: 2ex;color:red;} --> </style> </head> <body> <h1>見本</h1> <h2>ナビゲーションリストの横配置</h2> <ul class="nav"> <li><a href="">リンク1</a><span>あいうえお</span></li> <li><a href="">リンクリンク</a><span>かきくけこさしす</span></li> <li><a href="">リンクだよ</a><span>せそ</span></li> </ul> </body> </html>
その他の回答 (1)
- SAYKA
- ベストアンサー率34% (944/2776)
text-align が有効なのはブロック要素。 インラインは内容に合わせてboxを小さくしちゃうから「どっからどこが右？」ってなっちゃう。 なので件の事をやりたいのなら画像とリンクのブロック(左寄せ)と文字のブロック(右寄せ)を組んだ形にする事になるかな。 ただ、そのやり方だと 文字や画像の幅と表示面の幅の不一致で形が崩れたり重なったりブロック内で改行しちゃってズレたりで あまり良くないかも。 右寄せ左寄せを1列に混在させたいなら 避けられない。 (tableのtdで左右に分けるのと余り変らないと思えば良い)
お礼
勉強になりました。 今後の参考にさせていただきます。 回答ありがとうございました！
お礼
リンクリストの手があったとは…。 すっかり頭の中から抜け落ちていました。 書いてくださったHTMLを参考に記述してみたら上手くいきました。 回答ありがあとうございました！