No.2ベストアンサー
- 回答日時:
IE5.0/5.5/6.0 と NN4.7/6.2 で、試行錯誤してみました。
UL や FORM のような block系のタグでできる上下の空行を消すためには、普通はスタイルシートの「 display: inline 」を使用します。
ところがこれでうまくいったブラウザは1つもありませんでした。
NN4.7以外では左寄せになってしまい、その NN4.7 では下に空行ができてしまいました。
また IE5.5 以上では、最初の項目の・と文との間に余計な空白が入ってしまい、NN6.2 では・が表示されなくなってしまいました。
---sample---
本文です。<BR>
<UL style="display:inline">
<LI>項目1
<LI>項目2
</UL>
次の文です。<BR>
------------
次に、スタイルシートの「 margin 」を利用して、上下のマージンを0にしてみました。
IE 及び NN6.2 ではうまくいったのですが、NN4.7 では無視されてしまうようです。
---sample---
本文です。<BR>
<UL style="margin-top:0; margin-bottom:0">
<LI>項目1
<LI>項目2
</UL>
次の文です。<BR>
------------
スタイルシートをあきらめ、TABLE を使ってみることにしました。
NN では上下ともOKなのですが、IE では下にだけ空行ができてしまいました。
---sample---
本文です。<BR>
<TABLE border=0 cellpadding=0 cellspacing=0><TR><TD>
<UL>
<LI>項目1
<LI>項目2
</UL>
</TD></TR></TABLE>
次の文です。<BR>
------------
IE では margin の指定が有効なので、margin-bottom だけを0にしたところ、テストした全ブラウザで、同じように表示されることを確認できました。
---sample---
本文です。<BR>
<TABLE border=0 cellpadding=0 cellspacing=0><TR><TD>
<UL style="margin-bottom:0">
<LI>項目1
<LI>項目2
</UL>
</TD></TR></TABLE>
次の文です。<BR>
------------
# ちなみに「字下げ」というのは、例えば次の行のように、
この行のことです!
行頭をいくらか空けることを指します。
いろいろと試していただきありがとうございます。
TABLEをつかうことにし、無事におもいどおりになりました。
勉強になりました。ありがとうございました。
No.1
- 回答日時:
「スタイルシート」の技術を使うのがいいと思います.
とほほさんの「とほほのWWW入門」の中の,
http://tohoho.wakusei.ne.jp/www.htm
「とほほのスタイルシート入門」にある
http://tohoho.wakusei.ne.jp/wwwcss.htm
段落の1行目をインデント(字下げ)する
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にすると、左に寄ってしまいます。
本文とリストの行間を詰めたいのですが、どうすのでしょうか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS リストの並べ替え 1 2022/09/13 15:27
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- PHP アコーディオンPHPが上手くいかない 3 2022/07/15 16:29
- その他(プログラミング・Web制作) pythonリストの特定の値を表示htmlで表示できない 2 2022/05/14 05:48
- PHP PHPの構文で間違えが分からない 5 2022/07/11 16:38
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- PHP SQLとPHPの連結方法がわからないのでアドバイスお願い致します 1 2022/07/12 12:16
- HTML・CSS HTMLのdlとul どちらが正しいと思いますか 3 2023/02/23 11:20
- その他(プログラミング・Web制作) どうしてもエラーが解決できません。 1 2022/07/23 04:32
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSSのtransform: translate(-50...
-
テキストボックスの様に文字の...
-
aタグに直接style=""で:hoverを...
-
インラインフレームの表示位置...
-
フッターだけが真ん中に行って...
-
<legend>で表示されるタイトル...
-
テキストボックスの文字を右揃...
-
なぜ左に寄っているの?
-
ピクセル表示をパーセント表示...
-
chromeだけbody直下に空白が開く
-
付属画像の緑の背景の文字(お...
-
「全体のレイアウト:中央揃え...
-
インラインフレームのボーダー...
-
formタグ下にできる隙間を埋めたい
-
IEでDIV要素のセンタリング...
-
IBMのホームページビルダー10で
-
<h1>タグの後の行間を詰めたい。
-
Formタグのブロックの高さについて
-
文字を左上に配置したい。
-
HTMLフォームのSELECTの幅を一...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
CSSのtransform: translate(-50...
-
aタグに直接style=""で:hoverを...
-
<h1>タグの後の行間を詰めたい。
-
HTMLフォームのSELECTの幅を一...
-
インラインフレームの表示位置...
-
INPUT TEXT内の文字位置を指定...
-
コードを書いて下さい( ; ; )...
-
text-alignの解除の方法
-
FireFoxで見るとブラウザの幅に...
-
なぜ左に寄っているの?
-
端から端まで横線を引きたい
-
ホームページビルダー 空白の...
-
アップロードするサーバーによ...
-
CSSでh1とその下の文字との行間...
-
Formタグのブロックの高さについて
-
CSSの設定
-
<legend>で表示されるタイトル...
-
ie8とCSSとマウスオーバーで何...
-
chromeだけbody直下に空白が開く
-
macとwindowsのレイアウト崩れ...
おすすめ情報