<UL><LI>の使い方

質問

リストを作るのに使うUL、LIですが、通常各項目は字下げして表示されてしまいますが、字上げする方法を教えてください。

回答No.2

leaz024 · ベストアンサー

IE5.0/5.5/6.0 と NN4.7/6.2 で、試行錯誤してみました。

UL や FORM のような block系のタグでできる上下の空行を消すためには、普通はスタイルシートの「 display: inline 」を使用します。
ところがこれでうまくいったブラウザは１つもありませんでした。
NN4.7以外では左寄せになってしまい、その NN4.7 では下に空行ができてしまいました。
また IE5.5 以上では、最初の項目の・と文との間に余計な空白が入ってしまい、NN6.2 では・が表示されなくなってしまいました。
---sample---
本文です。<BR>
<UL style="display:inline">
<LI>項目１
<LI>項目２
</UL>
次の文です。<BR>
------------

次に、スタイルシートの「 margin 」を利用して、上下のマージンを０にしてみました。
IE 及び NN6.2 ではうまくいったのですが、NN4.7 では無視されてしまうようです。
---sample---
本文です。<BR>
<UL style="margin-top:0; margin-bottom:0">
<LI>項目１
<LI>項目２
</UL>
次の文です。<BR>
------------

スタイルシートをあきらめ、TABLE を使ってみることにしました。
NN では上下ともＯＫなのですが、IE では下にだけ空行ができてしまいました。
---sample---
本文です。<BR>
<TABLE border=0 cellpadding=0 cellspacing=0><TR><TD>
<UL>
<LI>項目１
<LI>項目２
</UL>
</TD></TR></TABLE>
次の文です。<BR>
------------

IE では margin の指定が有効なので、margin-bottom だけを０にしたところ、テストした全ブラウザで、同じように表示されることを確認できました。
---sample---
本文です。<BR>
<TABLE border=0 cellpadding=0 cellspacing=0><TR><TD>
<UL style="margin-bottom:0">
<LI>項目１
<LI>項目２
</UL>
</TD></TR></TABLE>
次の文です。<BR>
------------

# ちなみに「字下げ」というのは、例えば次の行のように、
　　　この行のことです！
行頭をいくらか空けることを指します。

お礼

いろいろと試していただきありがとうございます。
TABLEをつかうことにし、無事におもいどおりになりました。
勉強になりました。ありがとうございました。

回答No.1

wolv

「スタイルシート」の技術を使うのがいいと思います．

とほほさんの「とほほのWWW入門」の中の，
http://tohoho.wakusei.ne.jp/www.htm

「とほほのスタイルシート入門」にある
http://tohoho.wakusei.ne.jp/wwwcss.htm

段落の１行目をインデント（字下げ）する
http://tohoho.wakusei.ne.jp/wwwcss4.htm#Indent1

が参考になります．

HTMLの初めのほうで，

<STYLE TYPE="text/css">
<!--
P { text-indent: 20px }
LI { text-indent: -20px }
-->
</STYLE>

<p>本文
<UL>
<li>list 1
<li>list 2
</UL>
</p>

のように記述しておけばよいと思われます.

お礼

早速のご回答ありがとうございます。
「とほほのWWW入門」は参考になります。
ご回答のとおりやりましたが、LIのtext-indentを-20pxにすると、左に寄ってしまいます。
本文とリストの行間を詰めたいのですが、どうすのでしょうか？