- 締切済み
<ol><li> 左側にスペースができてしまう
<ol> <li> タグを使うと、左側にスペースができてしまう。 <ol> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ol> をすると、番号の左に若干スペースができてしまいます。 このスペースを作らないようにするにはどうすればいいでしょうか？
- GGJOPCQZBU
- お礼率79% (27/34)
- HTML
- 回答数3
- ありがとう数11
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
- neuron-x
- ベストアンサー率52% (139/266)
OLに対して、スタイルシートを適用すればスペースを詰めることができます。 スタイルシートの適用方法には色々ありますが、OLタグ全てに適用する場合は次のようなスタイルシートを定義すると良いですよ。 ※マージンも0pxにしてしまうと、リスト番号が画面外にはみ出して表示されなくなるので要注意！ ol{ margin-left:1em; padding:0px; }
お礼
ありがとうございました。
- root8110
- ベストアンサー率30% (6/20)
cssで下記のように指定してください。 ol { padding-left:1em; }
お礼
ありがとうございました。
関連するQ&A
- <ol><li></li></ol>タグでネスト
<ol><li></li></ol>タグで ネストするにはどうすればいいでしょうか？ <ol><li></li></ol>の中に<ol><li></li></ol>を入れたいです。 例えば ------------------------------------- １大分類 １－１ その１ １－２ その２ ２大分類 ２－１ その１ ２－２ その２ ------------------------------------- のようなことがしたいです。
- ベストアンサー
- HTML
- css の float:left; を li 適用
css の float:left; を li に適用すると <ul> <li>AAA</li> <li>BBB</li> <li>CCC</li> </ul> ●AAA●BBB●CCC のような横並びにできます <ul> <li>AAA</li> <li>BBB <ul> <li>aaa</li> <li>bbb</li> </ul> </li> <li>CCC</li> </ul> このように入れ子の場合 ●AAA●BBB ●CCC □aaa□bbb のように表示されます これを ●AAA●BBB●CCC □aaa□bbb のように、一段目に間を空けないで表示する CSS の設定を教えてください よろしく、お願いします
- ベストアンサー
- ホームページ作成ソフト
- <OL><LI>タグにて、こういう風にはできないのでしょうか？？？
こんにちは(*- -)(* _ _) たびたびお世話になっています。 今、ＨＴＭＬを作成中なのですが、 番号を振るタグで<OL><LI>がありますよね？ あれだと、 1. ●● 2. ●● という風に出るのですが、 1. ●● 1-1. ×× 1-2. ×× ××× 1-3. ××× このように、1-1.みたいにはできないでしょうか・・・(T-T) ムリっぽいなぁ・。・。・とは思うものの。。。 もし、「そのタグではムリなのでこうしてみたら？」というのがあれば是非教えてください！！！！
- ベストアンサー
- HTML
- スタイルシート
さっそく質問させていただきます。 <table border> <tr> <td rowspan="3"> <h3>AAA</h3> <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> </td> <td> <h3>BBB</h3> <ul> <li>aaa</li> <li>bbb</li> </ul> </td> </tr> <tr> <td> <h3>CCC</h3> <ul> <li>aaa</li> <li>bbb</li> </ul> </td> </tr> <tr> <td> <h3>DDD</h3> <ul> <li>aaa</li> <li>bbb</li> </ul> </td> </tr> </table> このタグを記述すると左に右の三つのセルをまたがったセルが表示されると思うのですが、これと同じレイアウトをスタイルシートで表現するにはどのように記述すればよいのでしょうか？ 左側に一つのボックスを置いて、その直ぐ隣に三つのボックスを置きたいのです。
- ベストアンサー
- CSS
- html <li>の中の文字一部に色を付けたい
html内でリストを使っています。 一覧の中で一部にだけ文字色を変えたいので、以下のように書いてみました。 <ul> <font color=red><li>AAA</li></font> <li>BBB</li> <li>CCC</li> </ul> ですが、反映されませんでした。 以前、リストの中はタグがあまり使えないと教えていただいたのですが、色も染められないのでしょうか？ 変えたい場合は、どのようにすればよいでしょう。 方法をご存じの方は、是非お教えください。 宜しくお願いします。
- ベストアンサー
- HTML
- 番号付きリスト（<Ol><Li>・・・</Ol>）の数字を全角に。
番号付きリスト（<Ol><Li>・・・</Ol>）の数字を全角に。 お世話になっております。 番号付きリスト（<Ol><Li>・・・</Ol>）の数字を全角にしたいのですが、 そのようなことはできるのでしょうか。 ご教授ください。よろしくお願いします。
- ベストアンサー
- HTML
- olタグ・liタグで一部のリストを横並びにした
olタグ・liタグで一部のリストを横並びにしたい場合 olタグに display: inline; list-style-type: none; としても意味がないのでしょうか? <style type="text/css"> ol.test1{ display: inline; list-style-type: none; }</style> <ol class="test1"> <li><a href="#">階層1</a></li> <li><a href="#">階層2</a></li> <li><a href="#">階層3</a></li> </ol> としても横にはならずに番号が消えました。 なので li.test2{ display: inline; list-style-type: none; } として <ol> <li class="test2"><a href="#">階層1</a></li> <li class="test2"><a href="#">階層2</a></li> <li class="test2"><a href="#">階層3</a></li> </ol> としたのですが liの数だけスタイルシートを指定しないとダメなのでしょうか? <ol> <li class="test2"><a href="#">階層1</a></li> <li><a href="#">階層2</a></li> <li><a href="#">階層3</a></li> </ol> のように一つだけクラスに入れたら そこだけ番号が消えた上 横並びにはなりませんでした。
- ベストアンサー
- CSS
- liにスタイルシートが上手くいかない
こんにちは。 次のコードが上手く表示されず困っています。 <ul> <li style="border:1px solid red">aaa</li> <ul> <li>bbb</li> </ul> </ul> この場合aaaにのみ赤い罫線がひかれると思うのですが、bbbまでくくった形で罫線がひかれます。 liはhtmlで省略可能なためこのようになるのでしょうか。それとも書き方を間違っているのでしょうか。
- ベストアンサー
- HTML
- floatでカラム落ちを防ぎたい
少し長いですがお付き合いよろしくお願いいたします。 <style type="text/css"><!-- body { text-align:center; } #all { width:730px; margin-left:auto; margin-right:auto;; text-align:left; background-color:#33ffcc} #left{width:50%; float:left;} #right{width:50%; float:left;} --></style> </head> <body> <div id="all"> <h1>見出し1</h1> <div id="left"> <h2>AAA</h2> <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> <h2>BBB</h2> <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> <h2>CCC</h2> <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> </div> <div id="right"> <h2>AAA</h2> <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> <h2>BBB</h2> <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> <h2>CCC</h2> <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> <h2>DDD</h2> <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> <h2>EEE</h2> <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> </div> </div> このように記述するとFirefoxではallで指定した背景色がh1にしか反映されず、left、rightの高さのずれている部分には反映されません。 この記述から、スタイルシートのrightに何も指定しないようにすると、allに指定した背景色はきちんと反映されるんですが、今度はleftよりrightのコンテンツが多いためカラム落ちしてしまいます。 どのように、記述すれば背景色がうまく反映され、カラム落ちを起こさずに済むのでしょうか？ 条件はFirefox,Opera,IE6でほぼ同じレイアウトが表現でき、tableやoverflowは使わない事です。
- ベストアンサー
- CSS
- onMouseoutの有効な範囲
初期状態：aaaという文字のみ表示 動作：aaaをクリックするとその下にbbb,cccというリンクが現れ、これら（aaa,bbb,cccの領域）からマウスアウトしたら、bbb,cccが消える というものを作る為に、以下のコードを書いてみました。 <div onMouseout="this.childNodes[1].style.display='none'"><p onClick="this.parentNode.childNodes[1].style.display='block'">aaa</p><ul style="display:none;"><li><a href="#">bbb</a></li><li><a href="#">ccc</a></li></ul></div> 「ブラウザによりノードのカウント方法が異なり挙動が変わる」のを防ぐために改行をなくしましたが、見やすくするとこうなります↓ <div onMouseout="this.childNodes[1].style.display='none'"> <p onClick="this.parentNode.childNodes[1].style.display='block'">aaa</p> <ul style="display:none;"> <li><a href="#">bbb</a></li> <li><a href="#">ccc</a></li> </ul> </div> これを実際に試してみると、aaaを押してリンクbbb,cccが出てきたのは良いものの、 リンクをクリックするためにマウスをbbb,cccへ移動しようとすると、 aaaから離れた時点でbbb,cccが消えてしまいます。 「div全体に」”マウスアウトしたらbbb,cccが消える”というつもりで上記のソースを書いたのですが、 divのonMouseoutはpからマウスアウトしても働いてしまうのでしょうか。 どのように修正したらよいか試行錯誤中です。 解決策があれば、どうぞよろしくお願いします。
- ベストアンサー
- JavaScript
お礼
ありがとうございました。