リンクを横一列に並べたいのですが・・
-
0 名前： 時蝋 ： 2005/12/28 15:42 ［URL］
- 初めまして。
質問なのですが、リンクを↓の方に並べようとしたら、
空白が作れません。
リンクリンクリンクリンク
＿＿＿＿＿＿＿＿＿＿＿＿
こんな感じです。
空白の作り方ってどうやるんですか？
-
1 名前： 匿名希望 ： 2005/12/28 15:42
- 全角空白か文字参照を使えばよろしいかと思います。
-
5 名前： 匿名希望 ： 2005/12/28 15:42
- 用語は用法を守って正しくお使いください。
参考）
http://www.scollabo.com/banban/apply/ap8.html
http://bakera.jp/html/reference/charref.html
-
6 名前： カヅサツ ： 2005/12/28 15:42 ［URL］
- まず、リンクを並べるということは箇条書きであると思われます。
箇条書きは li要素となります。そして、順不同型なら ul要素、順序があるなら ol要素で括ります。
<ul>
<li><a href="">リンク</a></li>
<li><a href="">リンク</a></li>
<li><a href="">リンク</a></li>
</ul>
多くのブラウザでは、li要素の先頭にマーカ（黒丸）を付け、改行して表示します。
この箇条書きだけ見栄えを変える場合、他の箇条書きと区別するために、class属性や id属性で名前を付けます。
<ul class="link">
<li><a href="">リンク</a></li>
<li><a href="">リンク</a></li>
<li><a href="">リンク</a></li>
</ul>
最後に "link"と名前を付けた ul要素と、その内容の li要素の見栄えを、CSS で変更します。
ul.link{
padding: 0px; /* 内部余白なし */
}
ul.link li{
display: inline; /* 前後に改行させない */
margin: 0px; /* 外部余白なし */
padding: 0px 10px 0px 0px; /* 内部余白右部のみ 10ピクセル。他はなし */
list-style-type: none; /* マーカ(黒丸)なし */
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja" dir="ltr">
<head>
<style type="text/css">
ul.link{
margin: 0px; /* 外部余白なし */
padding: 0px; /* 内部余白なし */
}
ul.link li{
display: inline; /* 前後に改行させない */
margin: 0px; /* 外部余白なし */
padding: 0px 10px 0px 0px; /* 内部余白右部のみ 10ピクセル。他はなし */
list-style-type: none; /* マーカ(黒丸)なし */
}
</style>
<title>test</title>
</head>
<body>
<ul class="link">
<li><a href="">リンク</a></li>
<li><a href="">リンク</a></li>
<li><a href="">リンク</a></li>
</ul>
<ul class="link">
<li><a href="">リンク</a></li>
<li><a href="">リンク</a></li>
<li><a href="">リンク</a></li>
</ul>
<ul>
<li><a href="">リンク</a></li>
<li><a href="">リンク</a></li>
<li><a href="">リンク</a></li>
</ul>
</body>
</html>
-
7 名前： 時蝋 ： 2005/12/28 15:42 ［URL］
- >匿名希望さん>カヅサツさん
お返事遅れてごめんなさい；
さっそくやってみます。
