HTMLについて

質問

HTML　矢印（画像）の向きについて
よくHPの下にある

『　←　前のページ　　次のページ　→　』

を表示させたいのですが、どのようにすればよいのかわかりません。
（矢印は画像）
現在の私のHTMLは

<div id="go"><a href="../＊＊/＊＊.html">前のページ（全角スペース）</a>
<a href="../＊＊/＊＊.html">次のページ</a> </div>

CSSは
#go a{
padding-left: 30px;
background: url(../img/＊.gif) no-repeat left;
}

となっているので『　→　前のページ　　→　次のページ　』
と表示されてしまいます。
矢印が同じ向きに表示されるのはわかるんですが、divタグを別にしてCSSで矢印の向きを
それぞれ指定しようとすると

『　←　前のページ
　　次のページ　→　』

となり改行されてしまいます。

同じ行に矢印の向きを別にして表示させるにはどのようにしたらよいのでしょうか？（矢印は画像で表示させたいです。）
誰か教えていただけると助かります。宜しくお願いします。

回答No.1

phoenix343 · ベストアンサー

divタグはブロック要素、
spanタグはインライン要素と呼ばれます。

spanに変えればいい話かと。

http://www.htmq.com/html/div.shtml
http://www.htmq.com/html/span.shtml

お礼

知識不足でした・・。　spanタグならブロック要素ではないので改行されないのですね！　有り難うございます！！

回答No.3

ORUKA1951

ブラウザで表示したときに最下段に表示されるリンク、「パンくずリスト(breadcrumb navigation)」と呼ばれるリンクだとします。(ヘンゼルとグレーテルより)
　私のサンプルを紹介します。
【インデントをあらわすため行頭に全角スペースがあります。(この掲示板の仕様上、Tabが使えない)。必ず空白文字に置き換えること】
<!-- パンくずリストをリストにしおく -->
<ul id="Navigation">
　<li class="goIndex"><a href="./index.html" title="目次へ"><img src="./image/icon/goIndex.gif" width="30" height="20" alt="">目次へ</a></li>
　<li class="goPrev"><a href="./page1.html" title="前ページへ"><img src="./image/icon/goPrev.gif" width="30" height="20" alt="">前のページ</a></li>
　<li class="goTop"><a href="#Top" title="このページのトップへ"><img src="./image/icon/goTop.gif" width="30" height="20" alt="">ページの先頭</a></li>
　<li class="goNex"><a href="./page3.html" title="次のページへ"><img src="./image/icon/goNext.gif" width="30" height="20" alt="">次のページへ</a></li>
</ul>

CSS________
ul#Navigation{
　display: block;
　text-align: center;
　border-top: 1px solid blue;
　border-bottom: 1px solid blue;
}
ul#Navigation li{
　display: inline;
　list-style-type: none;
　margin: 0px 10px;
}
￣￣￣￣￣ここまで
ここで、画像の表示を止めて、背景画像で飾る場合
ul#Navigation{
　display: block;
　text-align: center;
　border-top: 1px solid blue;
　border-bottom: 1px solid blue;
}
ul#Navigation li{
　display: inline;
　list-style-type: none;
　margin: 0px 10px;
}
ul#Navigation img{ /* アイコン非表示 */
　display: none;
}
ul#Navigation li a{ /*共通なもの一括指定 */
　line-height: 30px;
　background: repeat-x rgb(255,200,200);
　padding: 5px;
}
ul#Navigation li.goTop a{ /* 個別指定 */
　background-image: url(../image/icon/goTop.gif);
}
ul#Navigation li.goIndex a{
　background-image: url(../image/icon/goIndex.gif);
}
ul#Navigation li.goNext a{
　background-image: url(../image/icon/goNext.gif);
}
ul#Navigation li.goPrev a{
　background-image: url(../image/icon/goPrev.gif);
}
￣￣￣￣￣￣ここまで、
li calss 指定を使わず[属性名=属性値]で、たとえば
ul#Navigation li a[href=./index.html]
と指定する方法が良いのですが、IE6以前は対応していないため使いません。

　基本的には、HTMLを文書構造を正しく記述すること（スタイルシートがなくてもきちんとわかること）ができていれば、あとはスタイルシートで自由に・・・

お礼

こんなに長々と有り難うございます。
お礼が遅くなりました！！　無事完成することができました！
有り難うございます！！

回答No.2

dezimac

divはブロック要素だからそうなります。
divで囲って指定しなくても、aに直に指定すればいいだけです。

.next {
margin: 30px;
background: url(../img/＊.gif) no-repeat left;
}

<a href="" class="next">次へ</a>

CSSでなくimgタグで画像表示してした方が楽かと。
単なる装飾だから、CSSでやっても何の問題ないのだけど。

参考URL：

http://www.d-spica.com/designcatalog/inline/a002.html

お礼

お礼が遅くなりました！　無事できました！！
有り難うございます！！！