- 締切済み
箇条書きがずれて表示されてしまいます。
箇条書きで表される点がずれる(liタグ) 質問者:shige077 HTMLで箇条書きタグ <ul> <li>箇条書き一列目</li> <li>箇条書き二列目</li> ・・・ <li>箇条書き二十二列目</li> </ul> のタグをブラウザで見てみると ・箇条書き一列目 ・箇条書き二列目 ---(省略)--- ・箇条書き二十一列目 ・箇条書き二十二列目 と、いうように一番下の列がずれて表示されてしまっています。ずれないようにするにはどうしたらいいでしょうか。 タグのバグなのか、CSSの定義などの問題なのか、ちょっとわからなくて困っています。 どなたか教えていただけませんか?
- みんなの回答 (3)
- 専門家の回答
関連するQ&A
- 箇条書きで表される点がずれる(liタグ)
HTMLで箇条書きタグ <ul> <li>箇条書き一列目</li> <li>箇条書き二列目</li> <li>箇条書き三列目</li> </ul> のタグをブラウザで見てみると ・箇条書き一列目 ・箇条書き二列目 ・箇条書き三列目 と、いうように三列目がずれてしまっています。三列目がずれないようにしたいと思っています。 タグのバグなのか、CSSの定義などの問題なのか、ちょっとわからなくて困っています。 どなたか教えていただけたらと思います。
- ベストアンサー
- ホームページ作成ソフト
- 箇条書きの、項目間のマージンをCSSで空ける
箇条書きの項目間のマージンをCSSで空けるために li{ margin-top:0.5em; } と <style>-</style> に書きました。 ふつうの箇条書き: <ul> <li>AAAAA</li> <li>BBBBB</li> </ul> では、項目間にマージンができてくれたのですが、 画像を先頭にした箇条書きでは、だめでした。 たとえば、 <ul imagesrc="botan.gif"> <li>AAAAA</li> <li>BBBBB</li> </ul> とすると、項目間のマージンがゼロです。 なぜでしょうか?良い方法はないでしょうか?
- ベストアンサー
- CSS
- CSSのセレクタの指定方法
基本的なところで恐縮です。 ひさびさに他人が作ったHTML&CSSをいじっていたら混乱してきました。たとえば以下のようはHTMLがあったとします。 -- <ul id="gmemu"> <li>hoge1</li> <li>hoge2</li> </ul> -- このとき、ul、liタグのスタイルを定義したいときのセレクタの指定の仕方としてはどちらが正しいのでしょうか? ■その1(ID名 タグ名) #gmenu ul{ } #gmenu li{ } ■その2(タグ名 ID名) ul#gmenu{ } ul#gmenu li{ } かなり初心者入ってますが、教えていただければ幸いです。 よろしくお願いします。
- ベストアンサー
- HTML
- リストを横並びにするとマーカーが消える(IE)
cssデザインをしているのですが、<ul><li></li></ul>タグで箇条書きを使っています。これをfloatで横並びにさせたのですが、IEで見たとき横に表示されるべきマーカーが消えてしまいます。これの対処法を教えていただけませんでしょうか?画像で置き換え以外の方法でお願いします。
- 締切済み
- HTML
- menuのHTMLタグとCSSが上手くいかない
画像(1)が現状です。イメージは(2)です。何故HTMLタグを別々にするかというとスマホにしたらsubメニューをボトムに配置したいのです。 メニューとsubメニューの背景がくっつかないのです。 (1)を(2)にするにはどうすれば良いでしょうか? 以下がHTMLタグとCSSになります。 アドバイスをお願いします。 HTMLタグ <div class="div1"><ul><li>メニュー1</li><li>メニュー2</li><li>メニュー3</li><li>メニュー4</li></ul></div> <div class="div2"><ul><li>sab1</li><li>sub2</li></ul></div> CSSスタイル ul li { list-style: none; } .div1 { background: #ccc; float: left; } .div2 { width: 240px; background: #999; float: right; } li { float: left; padding: 5px 15px; }
- 締切済み
- HTML
- vertical-alignについてお尋ねします。
htmlコーディングで、以下のようにliタグにimgタグを埋め込みました。 <ul> <li><img ~ height="18px" ></li> <li><img ~ height="18px" ></li> </ul> CSSでは、 ul li { padding-bottom: 4px; } としたのですが、実際にブラウザで表示させてみると画像の高さ18px+padding-bottom4px分以上の高さとなり、二つのliの間が広くなってしまいました。 そこで、imgタグに「vertical-align:top;」と記述したところ、見た目上正しい位置に治りました。 こういった現象は起きてしまうものなのでしょうか?
- ベストアンサー
- HTML
- foreachで配列を、左から縦3列に表示したい。
foreachで配列を、左から順番に、縦3列で表示したいのですが、どうすれば良いでしょうか? ※CSSでulタグを縦表示指定してます ■表示したいタグ <ul> <li></li> <li></li> </ul> <ul> <li></li> <li></li> </ul> <ul> <li></li> <li></li> </ul> ■やりたいこと(10件だった場合) ・3で割ってちょうどいい感じにして、さらに一番左から縦に順番に表示させていきたい <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <ul> <li>5</li> <li>6</li> <li>7</li> </ul> <ul> <li>8</li> <li>9</li> <li>10</li> </ul> ■現状(一番左に表示されるだけ) <ul> <?php foreach ($arrdata as $data): ?> <li><?php echo $data['a']; ?></li> <?php endforeach; ?> </ul> <ul> <li></li> <li></li> </ul> <ul> <li></li> <li></li> </ul> ・どうしたら良いでしょうか?
- ベストアンサー
- PHP
- divタグ内のコンテンツが重なって表示されてしまう。
下記のようなHTMLを表示させるときに IEでは上下に並んで表示されるのですが、FF、Operaなどでは重なって表示されてしまいます。 どうしたら、上下に並べて表示させられますか? <div id="a"> <div id="b"> <ul> <li>重なってしまう文字列</li> <li>重なってしまう文字列</li> </ul> </div> </div> <table> <!-- このテーブルタグの上に重なって表示されてしまう --> </table>
- 締切済み
- HTML
- HTMLのulタグで表示される「・」を消したい
ネットで調べて下記二通りを試しましたが消せませんでした。 1.HTMLで<ul class="doterase">とし、CSSで .doterase li { list-style: none; } とした。HTMLでClass="doterase"としているのにCSSで.doteraseと先頭に「.」を追加した理由は 判りません。 2.HTMLでulタグに <ul style="list-style: none;">としても同じでした。 HTML,CSSのコードは下記のとおりです。 HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>日本の将来る</title> <meta name="discriptio" content="八十路の提言"> <link rel="stylesheet" href="homestyle.css"> </head> <body> <h1><center>日本の将来</center></h1> <h2><center>八十路の提言</center></h2> </body> <ul > <li> <a href="https://google.co.jp">aaaa</a> </li> <li> <a href="https://google.co.jp">bbbb</a> </li> <li> <a href="https://google.co.jp">cccc</a> </li> </ul> <div style="border: 3px none;"> 枠線を実線で装飾11111111111111111111111111111111111111111111111111111111 </div> </html> CSS @charset "UTF-8" ; body { background-color : #adcc33; font-size: 40px; width: 200; height:200; position: relative; /* 日本の将来に期待する */ top: 10px; /* 上から10px */ p { font-size: 40px; } <style> .doterase li { list-style: none; } </style> <ul class="doterase"> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> li { color: #000000; font-size:30px } 参考書を理解しないままコピペでつくっています。HTML/CSSは最近始めたばかりなので超初心者です。よろしくお願いいたします。Windows11なのでHTML,CSS.共最新バージョンだと思います。 なお、これと同じ内容で他のQ&Aサイトに投稿しましたが質問の仕方が拙かったようで内容の訂正でなく取り消し後再質問したら回答がなくなったためこちらに質問しています。
- ベストアンサー
- HTML
- リスト(ul / li)タグの左インデントの解除
HTML、CSSの初心者です。 リスト(ul / li)タグの左インデントの解除の仕方がわかりません。 IE系とMozila系でインデント解除の方法を教えていただけないでしょうか。 ◆現在の書き方 ----------------- ・HTML <ul id="navi"> <li>サンプル</li> <li>サンプル</li> <li>サンプル</li> <li>サンプル</li> <li>サンプル</li> </ul> ----- ・CSS #navi ul {list-style: none; margin: 0; padding: 0;} #navi li {list-style: none; float: left; margin: 0; padding: 0;} ----------------- よろしくお願いいたします。
- 締切済み
- HTML
- パーソナル編集長Ver.10を使用している際に、PDF出力ができなくなる問題が発生しました。
- Windows10を使用している場合、PDF出力ができなくなる可能性があります。
- 問題の解決策に関する具体的な情報やサポートをご提供いたします。
お礼
ご回答ありがとうございます。改行なしで試してみましたが、改善されませんでした。