- ベストアンサー
リストの番号と項目の間
thatsthatの回答
list-style-position:inside で詰まると思います。 詳しい事はCSS解説サイトで、list-styleの項を探してみて下さい。 HTML中に書くなら <ol style="list-style-position:inside"><li>・・・ のようになります。
関連するQ&A
- ol要素の番号とリスト項目の離れについて
最近HPを作り始めた素人です。 DWでol要素を使って順序つきの項目リストを作っております。 DWのデザインウィンドウとIEだとちゃんとリスト項目の行頭に番号が表示されるのですが、Google Chromeで閲覧すると番号とリスト項目が離れて表示されてしまいます。 (番号は左寄り、項目は中央です。) 例 <ol> <li>アメリカ</li> <li>フランス</li> <li>イギリス</li> </ol> IE 1. アメリカ 2. フランス 3. イギリス Chrome 1. アメリカ 2. フランス 3. イギリス 因みにこのol要素をdiv idで囲んでいてText-alignをcenterにしております。 単純な間違いだとは思うのですが、知識不足のため分かりません。 恐れ入りますが、どなたかご教授お願いいたします。
- 締切済み
- その他([技術者向] コンピューター)
- リストで間が開いてしまう・・・
xhtml&cssでサイト作成を行っているのですが、 リストをインラインでならべて、 list-style-type: none; でリストの黒丸を消して、 そこに画像を入れてならべようと思ったのですが、 画像と画像の間に隙間が開いてしまいます。 ソースはこちらです。 ---XHTML------------------------- <div id="@"> <ul> <li> <img src="@" /> </li> <li> <img src="@" /> </li> <li> <img src="@" /> </li> </ul> </div> ----XHTML---------------------------------- ----CSS------------------------------------ div#@@@@ ul{ display: inline; list-style-type: none; margin: 0px; padding: 0px; } div#@@@@ li{ display: inline; list-style-type: none; margin: 0px; padding: 0px; } ----CSS------------------------------------ 念のために、ulとliの両方を指定しておきました。 (通常は、liだけでよいです。） このとおりになるのですが、 これで、隙間をなくす方法を知っていたら教えてください！ お願いします！
- 締切済み
- HTML
- jQueryでリストを3項目ずつにしたい。
いつもこちらでお世話になっています。 またjQuery関連で質問をさせて下さい。 下のようなリスト項目をfloatさせています。 <ul class="box"> <li>項目1</li> <li>項目2</li> <li>項目3</li> <li>項目4</li> </ul> レイアウトをcssで設定して 1行あたり3項目ずつの横並びにしたいと考えています。 ４項目以上の場合は、 2行目に、あらたに3項目分のリストを表示したいです。 ※liの個数は動的に変化します。 ※cssの方は特に問題なく出来ています。 例えば上記の例のように4項目あった場合に 2行目が1項目分しかないため、2項目分の余白ができるので その足りない分のliの個数を算出し、liを追加したいと考えています。 $('ul.box').append('<li />'); を使うのだと思うのですが どのようにappendするliの個数を、算出したらよいのでしょうか？ 詳しい方、初心者の私にどうかご教授下さい。 いつもながらに恐縮ですが、何卒、宜しくお願いいたします。
- ベストアンサー
- JavaScript
- 番号付きリスト（<Ol><Li>・・・</Ol>）の数字を全角に。
番号付きリスト（<Ol><Li>・・・</Ol>）の数字を全角に。 お世話になっております。 番号付きリスト（<Ol><Li>・・・</Ol>）の数字を全角にしたいのですが、 そのようなことはできるのでしょうか。 ご教授ください。よろしくお願いします。
- ベストアンサー
- HTML
- 「※」印のリストをつくる方法
htmlコーディングをしています。 「※」印のリストを作成するには、どうすればいいのでしょうか？ 通常よくみる「・」や番号のリスト作成は分かるのですが 「※」についてが分かりません。 <ul><li>～</li></ul>←これらのタグを使用して解決したいと思っています。 （ulもしくは、ol） お分かりになる方、お教え頂けますでしょうか？ よろしくお願いいたします。
- ベストアンサー
- その他(業務ソフトウェア)
- 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
- HTMLのリストについて教えてください。
HTMLのリストについて教えてください。 ワード文章をドリームウィーバーで作成しておりますが、番号のついた文章の中にまた、番号付の文章を入れるため、olでくくったliの文章の中にolでまたliの文章を組むことにより、番号をふったものを作成できましたが、バリデートでチェックするとエラーとなり、ol内にol を使用できないとコメントがありました。他の方法が思いつかないのですが教えていただけないでしょうか。 <ol> <li>見出し文章</li> <li>見出し文章</li> <ol> <li>詳細な内容</li> <li>詳細な内容</li> </ol> <li>見出し文章</li> <li>見出し文章</li> </ol>
- ベストアンサー
- ホームページ作成ソフト
- リストの間隔の違いについてなのですが
リストの間隔の違いについてなのですが 【 HTMLの記述 】 <ol> <li>ほげほげ</li> </ol> 【 CSSの記述 】 ol li { list-style-position: inside; } 上記の場合、それぞれのプラウザで以下のように違いが出てきます。 <IE6,IE7,Firefox3の場合> 1. ほげほげ <IE8の場合> 1. ほげほげ これのIE8の間隔を狭めたいのですが可能なのでしょうか？ outsideは使わない方法でよろしくお願いします。
- ベストアンサー
- HTML
お礼
ありがとうございました。