「忠犬もちしば」のAIボットを作ろう!

<p>要素をインライン要素にしての右寄せ

【以下、HTML】
.text{
font-size:12px;
font-weight:normal;
margin:0px;
padding:25px 0px 0px 35px;
}

<div class="text">
<img src="-" style="vertical-align:-2px;margin:0px 10px 10px 15px;"><a href="-">リンク</a><p style="text-align: right;display:inline;">あいうえお</p><br></div>

上記の「あいうえお」の部分を画像やリンクと並列したく、インライン要素で右寄せしたいんですがどうしたらいいでしょうか?

よろしくお願いします。

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

A 回答 (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>
    • good
    • 0
この回答へのお礼

リンクリストの手があったとは…。
すっかり頭の中から抜け落ちていました。
書いてくださったHTMLを参考に記述してみたら上手くいきました。
回答ありがあとうございました!

お礼日時:2010/05/22 21:42

text-align が有効なのはブロック要素。


インラインは内容に合わせてboxを小さくしちゃうから「どっからどこが右?」ってなっちゃう。
なので件の事をやりたいのなら画像とリンクのブロック(左寄せ)と文字のブロック(右寄せ)を組んだ形にする事になるかな。

ただ、そのやり方だと 文字や画像の幅と表示面の幅の不一致で形が崩れたり重なったりブロック内で改行しちゃってズレたりで あまり良くないかも。

右寄せ左寄せを1列に混在させたいなら 避けられない。
(tableのtdで左右に分けるのと余り変らないと思えば良い)
    • good
    • 0
この回答へのお礼

勉強になりました。
今後の参考にさせていただきます。
回答ありがとうございました!

お礼日時:2010/05/22 21:36

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

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


人気Q&Aランキング