- ベストアンサー
htmlについて
htmlで質問です。 単純にul.liを隙間なく二段、二行で表示する方法（css）を教えてください。
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- javascriptでCSVを読み込み表示する方法を探しています。
javascriptでCSVを読み込み表示する方法を探しています。 <div id="hoge"> <ul class="hogehoge"> <li><a href="1行目の1つ目のデータ">1行目の2つ目のデータ</a></li> <li><a href="2行目の1つ目のデータ">2行目の2つ目のデータ</a></li> ・ ・ ・ </ul> </div> で、ulに囲まれた部分をjavascriptで生成させたいのですが・・・ （ulのところのCSS指定は、idではなく、classにしたいです） よろしくお願いいたします。
- 締切済み
- JavaScript
- 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 の設定を教えてください よろしく、お願いします
- ベストアンサー
- ホームページ作成ソフト
- css li に入れ子で適用する範囲
HTML の li にｃｓｓを適用する場合ですが 下のように入れ子の場合 A行に #aaaaa {background-color:yellow;} B行に #bbbbb {background-color:pink;} B行の部分だけはピンクになりますが A行の入れ子部分は黄色です このような入れ子状態で、A行一行のみ黄色にすることはできますか A行の下の <ul>に対して、別の cssを適用するなど なにか方法があれば教えてください よろしく、お願いします <ul> <li>1st item</li> <li>2nd item <ul> <li>2 - 1</li> <li id="aaaaa">2 - 2 ...A行 <ul> <li id="bbbbb">2 - 2 - 1</li> ...B行 <li>2 - 2 - 2</li> <li>2 - 2 - 3</li> </ul> </li> <li>2 - 3</li> </ul> </li> <li>3rd item</li> </ul>
- ベストアンサー
- ホームページ作成ソフト
- WinIE5でリストに隙間ができる
WinIE5で下記のCSSを実行すると、なぜか文字の下に隙間が出来てしまいます。 WinIE5.5、WinIE6等では隙間は出来ません。 なにかうまく解決する方法はありませんでしょうか。 よろしくお願いします。 ------------------------------ #nav ul { list-style: none; margin: 0; padding: 0; } #nav li { margin: 0; padding: 0; background: #e0861e; width: 100px; } <div id="nav"> <ul> <li>あいうえお</li> <li>かきくけこ</li> <li>さしすせそ</li> </ul> </div> ------------------------------
- 締切済み
- HTML
- ＣＳＳでulとliを指定し横に並べたいです。
ulとliを使っても横に表示できる方法わかる方教えてください。 例 <ul> <li>あああ</li> <li>いいい</li> <li>ううう</li> <li>えええ</li> </ul> 普通は ・あああ ・いいい ・ううう ・えええ となってしまいますがこんな感じで作りたいのですが。 ・あああ ・いいい ・ううう ・えええ みたいに横にしたのですがどうやってやればいいかわかりません（泣） たぶんＣＳＳで指定するのかと思ってますが、違うんでしたらそのやり方を教えてください。
- ベストアンサー
- HTML
- リストで間が開いてしまう・・・
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
- <li>内の<ul>を横に表示する方法
<li>内の<ul>を横に表示する方法がわからずに困っています。 例えば <ul> <li>野菜 <ul> <li>大根 <li>にんじん </ul> </li> <li>果物 <ul> <li>りんご <li>バナナ </ul> </li> </ul> これを以下のように表示させたいのです。 ・野菜 ・大根 ・にんじん ・くだもの ・りんご ・ばなな この場合、CSSはどのように記載すればいいのでしょうか。 ご存知の方、ご教授頂けると幸いです。
- ベストアンサー
- 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
- IE8でli:hoverが効かない
Window7 IE8を使っています。 ホームページにｃｓｓを使ったドロップダウンメニューを導入したいのですが、 li:hoverが効きません。 ｃｓｓかhtmlが間違っているのかと思い、念のためいろいろなサイトから ｃｓｓドロップダウンメニューの例文をもらってきて 書き込んでみましたが、どうしてもサブメニューが表示されません。 たとえば、 【css】 /* メインメニュー */ #menu ul { display:block; list-style-type: none; margin:0; padding:0; } /* サブメニュー1段目 */ #menu ul ul{ display:none; position:absolute; top:100%; left:0; } /* サブメニュー2段目以降 */ #menu ul ul ul { top:0; left:100%; } /* リスト */ #menu li { float:left; } #menu li li { clear:both; } #menu li:hover { position:relative; } #menu li:hover > ul { display: block; } 【html】 <body> <div id="menu"> <ul> <li><a href="#">menu1</a> <ul> <li><a href="#">submenu1</a></li> <li><a href="#">submenu2</a></li> <li><a href="#">submenu3</a> <ul> <li><a href="#">submenu3-1</a></li> <li><a href="#">submenu3-2</a></li> <li><a href="#">submenu3-3</a></li> </ul> </li> </ul> </li> <li><a href="#">menu2</a> <ul> <li><a href="#">submenu4</a></li> <li><a href="#">submenu5</a></li> </ul> </li> <li><a href="#">menu3</a> <ul> <li><a href="#">submenu6</a></li> <li><a href="#">submenu7</a></li> <li><a href="#">submenu8</a></li> <li><a href="#">submenu9</a></li> </ul> </li> </ul> </div> </body> メニューにカーソルをもってきても、 サブメニューが表示されません。 原因や回避方法を教えていただけないでしょうか。 よろしくお願いします。
- ベストアンサー
- HTML
