- ベストアンサー
リストの前後の行間をなくす方法を教えてください。
quadsの回答
- quads
- ベストアンサー率35% (90/257)
marginとline-heightでの指定が考えられます。 line-heightを指定するタグはliだけで良いのですが、ブラウザ（NC4.6など）によっては認識が異なるのでul,olも同時に指定した方がよいと思われます。 ということで、同一HTMLソース内に記述する場合は、 <head></head>内に <style type="text/css"> <!-- ul,ol,li{ line-height:100% } --> </style> の指定でよいかと思います。 無論、100%が規定値です。パーセント指定でなくとも適用されます。 個人的に、特に理由がない限りパーセント指定が好ましいと思います。 li内で改行が行われている場合は、その行間にも適用されます。 なので、li自体の間隔のみを指定したい場合は、margin等で調整してください。 ※外部ファイル参照での指定が推奨されますが。 ※ドキュメントタイプにより厳密には推奨指定方法が異なります。 ※また、metaタグの記述も必要です。（文字セットや使用属性のスクリプト言語指定） 追記。 スタイルシートの基礎を理解されていないようであれば、少しでも学ばれることをお勧めします。
関連するQ&A
- 行間の調整方法を教えてください
ブログのテンプレートをカスタマイズしてる中で、やり方が分からないところが出てきました。 <ul style="line-height:200%;"> <li>あああああああああああああああああ</li> <li>かかかかかかかかかかかかかかかかかかかかかかかかかかか</li> <li>さささささささ</li> </ul> 上記 ｈｔｍｌ は下図のように表示されます。リストが途中で折り返されるのは幅が広くとっていないからです。なお、数字は説明の便宜で付けています。 図で行間が均一になっています。 リストの間を、つまり、 「2と3の間の行間」、「5と6の間の行間」をもう少し広くしたいと思います。 その方法を教えてください。
- ベストアンサー
- ブログ
- リストで行間を指定したい
リストで「情報」のテキストとリスト1行目「その1」の行間だけを指定したいのですが、可能でしょうか。 ul { list-style-image: url('image/arrow.gif'); } li { margin-bottom: 0.2em;} ----- <p>情報</p> <ul> <li>その1</li> <li>その2</li> </ul>
- ベストアンサー
- HTML
- IE7で行間 助けてください
行間の差がありすぎます。IE7で１行程度の行間が出来ます。行間の差を少なくしたいです。 検証お願いします。 ul{ margin:0; padding:10px 0; font-size:85%;} li{ display: block; float:left; margin:0; padding: 0px 8px; white-space:nowrap; list-style:none;} <div style="width:400px;"> <ul> <li>あああああああああ</li> <li>いいいい</li> <li>ううううううううう</li> <li>ええええ</li> <li>おおおおおおおおお</li> <li>かかかか</li> <li>ききききききききき</li> <li>くくくく</li> <li>けけけけけけけ</li> <li>こここここここここ</li> </ul> <br style="clear: both;" /> </div>
- ベストアンサー
- HTML
- cssでリストの行間をひろげるには？
cssでリストの行間をひろげる方法をお教えください。 ・あいうえお ・かきくけこ で、2行の間隔を1.5倍ほどにひろげたいのです。 よろしくおねがいします。
- ベストアンサー
- その他（プログラミング・開発）
- リストに画像入れると
<ul> <li><img src=…><li> <li><img src=…><li> </ul> のようにすると、IE6.0で、リストに行間が発生します。Netscape7だと画像はぴったりとくっついて並ぶのです。 IEでぴったりとくっつくにはどうしたらいいですか？
- ベストアンサー
- HTML
- cssのリストで、番号1と2の間の行間を「2」にする方法は？
css（スタイルシート）のリストで、番号1と2の間の行間を「2」にする方法をお教えください。1や2の文章群の段落は「1.5」になっています。 1。あああああああああああああああああああああああああああああああああああああああああああああああああああ。 （この部分を「2」にする） 2。えええええええええええええええええええええええええええええええええええええええええええええええええええええええええ。 （この部分を「2」にする） 3。ううううううううううううううううううううううううううううううううううう
- ベストアンサー
- HTML
- HP作成時のリストやインデントの設定について
DreamweaverCS4を使っています。 文中にリストやインデントを挿入したいと思っています。 ------------------------------------ タイトル文1 ・文章1 ・文章2 タイトル文2 ------------------------------------ という感じに「文章～」の部分がリストになります。 ------------------------------------ <style type="text/css"> <!-- li,ul { margin: 0 0 0 1em; padding: 0; } li,ol { margin: 0 0 0 1em; padding: 0; } ------------------------------------ リストの前の空白部分の調整方法はネットで調べ上記の感じで調整できました。 ですが、リストにすると「タイトル文1～・文章1」や「・文章2～タイトル文2」の間のように 1行文の空白が出来てしまいます。 この行間を半分くらいにする、もしくはなくすことは可能でしょうか？ 仕様と言われてしまったらそれまでですが、やり方があれば調整したいと思い質問させていただきました。 よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- リスト間の隙間を無くす方法 jquery
jquery記述にてリスト間の隙間を無くす方法を探しています。 改行してあるリスト項目を <ul> <li>aaa</li> <li>aaa</li> <li>aaa</li> </ul> ↓ <ul> <li>aaa</li><li>aaa</li><li>aaa</li> </ul> このように隙間なく並べた場合と同じ状態にしたいのですが、どのような方法があるのでしょうか。 <li>aaa</li><!-- --><li>aaa</li> このようにコメントアウト入れようと思いましたがうまく入りませんでした。 もっと良い方法などあれば教えて頂きたく質問させていただきました。 記述など具体的にあれば大変助かります。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- テキストボックスで改行するたびにエキストラの行間ができてしまいます。
テキストボックスで改行するたびにエキストラの行間ができてしまいます。 いつもお世話になっています。 テキストボックスの中でふつうに文を書き、改行(ENTERキーを押す)すると何故か知りませんが余分な一行ぐらいの空白ができるのです。改行せずに書き続けると空白は全然できないのですが改行すると余分な空白が…（行間というのでしょうか？） いろいろいじってみても解決が見つからずぜひその空白行間を消す方法を誰か教えてくれたら・・と思っています。 よろしくお願いします。
- 締切済み
- Windows Vista
- リストを作りたいです
CSSを使ってリストを作っています。 <ul> <li>～～～</li> <li>～～～</li> <li>～～～</li> </ul> という感じにしています。 これを、リストの中にリストがあるようにしたいのですが、どうすればいいでしょうか？ ●花 □バラ □桜 □梅 ●果物 □イチゴ □バナナ □すいか ●乗り物 □バス □新幹線 □飛行機 ↑こういった表示にしたいと思っています。 よろしくお願いします。
- ベストアンサー
- HTML
お礼
行の高さをパーセントで指定することもできるんですね。 教えていただきありがとうございました。 スタイルシートについては、さわりの部分を理解している程度です。今までは、必要に迫られてやってみたら何となくできていたというものなので、ちゃんと理解していません。これをきっかけに勉強したいと思います。