- ベストアンサー
<ol>でfloatを使っての3列表示をした時の不具合
下記の様にし、リストをテーブルを使わずに3列表示したいのですが、 Firefoxだとそのままちゃんと表示されるのですが、IEだと数字ではなく、ドットで表示されてしまいます。 Operaに至っては列毎に1から数字が振られてしまいます。 何か解決法はありませんでしょうか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>参考リスト</title> <style type="text/css"> <!-- #line1 { float: left; width: 150px; } #line2 { float: left; width: 150px; } #line3 { float: left; width: 150px; } --> </style> </head> <body> <ol> <div id="line1"> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </div> <div id="line2"> <li>リスト4</li> <li>リスト5</li> <li>リスト6</li> <li>リスト7</li> </div> <div id="line3"> <li>リスト8</li> <li>リスト9</li> <li>リスト10</li> </div> </ol> </body></html>
- harukatsum
- お礼率27% (3/11)
- HTML
- 回答数9
- ありがとう数2
- みんなの回答 （9）
- 専門家の回答
質問者が選んだベストアンサー
> ただ、この方法だと、私が意図するような表示が出来ません。 > 次の列に行くと再度１から表示されてしまいます。 当然ですね。列毎に新しいolでマークアップされているのですから、liの番号がリセットされます。 olにstart属性というのがあります。これを使用すればご希望には添うかと思いますが、この属性は非推奨であり、HTML4.01 strict／XHTML1.0 strict／XHTML1.1では廃止されています。質問様のHTML文書はHTML 4.01 Transitionalですのでかろうじてセーフですが… ---------------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css">※←CSS（<style type="text/css">～</style>）を使用するならこのmeta情報が必要です。 <title>参考リスト</title> <style type="text/css"> <!-- ol#line1, ol#line2, ol#line3 { float: left; width: 150px; margin: 0 1em 0 0; padding: 0; } ol li { padding: 0; margin: 0 0 0 2.5em; } #hoge {※←この指定はついでに書いておきましたが、フロートしているolのすぐ下でフロート状態をクリアするなりしておかないと続く要素が回り込んでレイアウトがおかしな事になります。 clear: left; margin: 0; } --> </style> </head> <body> <ol id="line1"> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ol> <ol id="line2" start="4"> <li>リスト4</li> <li>リスト5</li> <li>リスト6</li> </ol> <ol id="line3" start="7"> <li>リスト7</li> <li>リスト8</li> <li>リスト9</li> <li>リスト10</li> </ol> <p id="hoge">下に続く要素</p> </body> </html> ---------------------------------------------------------------------- あくまで非推奨の方法だという事は了承しておいて下さい。 ※「<ol>の中に<div>はない方がいい」という記述は、「あってもいい／あっても違反ではない」という意味ではなく、その様なマークアップはHTMLの文法では有り得ない、という事ですので質問者様は誤解されません様に。
その他の回答 (8)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
バグだらけというか、未対応のIEを無視して、IEのみ、リストナンバーを表示させない方法で、対処。項目No.はでないが、@media screen{}で括っておけば、スクリーン以外(ＳＥを含む)でも、問題ないと思う。IEも8あたりになれば、対応してくるだろうと期待して。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>Untitled</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- @media screen{ ol#list{ /* display:block; */ display:block; padding-top:0.5em ; padding-left: 2em; width:800px; height: 4.8em; /* ;ine-height×4 */ border: 1px solid red; } ol#list li{ display:block; list-style-type:none; position:relative; line-height: 1.2em; width: 240px; display:list-item; } ol#list li.center{ top: -4.8em; /* ;ine-height×4 */ left: 266px; } ol#list li.right{ top: -9.6em; /* ;ine-height×4×2 */ left: 532px; } li.ol1:before { content: "1. " } li.ol2:before { content: "2. " } li.ol3:before { content: "3. " } li.ol4:before { content: "4. " } li.ol5:before { content: "5. " } li.ol6:before { content: "6. " } li.ol7:before { content: "7. " } li.ol8:before { content: "8. " } li.ol9:before { content: "9. " } li.ol10:before { content: "10. " } li.ol11:before { content: "11. " } } --> </style> </head> <body> <h1>title</h1> <h2>subTitle</h2> <ol id="list"> <li class="left ol1">リスト1</li> <li class="left ol2">リスト2</li> <li class="left ol3">リスト3</li> <li class="left ol4">リスト4</li> <li class="center ol5">リスト5</li> <li class="center ol6">リスト6</li> <li class="center ol7">リスト7</li> <li class="center ol8">リスト8</li> <li class="right ol9">リスト9</li> <li class="right ol10">リスト10</li> </ol> <div style="margin-top:10em"> <p>テスト</p> </div> </body> </html> 一つのOLとして、正しく、マークアップして、かつ３段にするには、今のところこれしか思いつかない。 これだと携帯端末などで訪問した場合は、きちんとOLとして表示される。
お礼
ご回答有難う御座います。 内容的にはこちらが良いのですが、一番シェアの多いIEで非表示というのが残念。。。 今回は非推奨ではありますが、start属性で見た目的に近いもので行こうかと思います。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
No.6 ORUKA1951です。 IEでのチェックを忘れてました。スタイルシートを変更しても、IEではリスト番号がline-itemに連動して動かないですね。・・opera,safari,firefoxでは図のように移動します。 ol#list{ /* display:block; */ list-style-type:decimal; padding-top:0.5em ; padding-left: 2em; width:800px; height: 4.8em; /* ;ine-height×4 */ border: 1px solid red; } ol#list li{ position:relative; line-height: 1.2em; width: 240px; list-style-position:outside; display:list-item; } ol#list li.center{ top: -4.8em; /* ;ine-height×4 */ left: 266px; } ol#list li.right{ top: -9.6em; /* ;ine-height×4×2 */ left: 532px; } }
- abril
- ベストアンサー率69% (388/560)
ANo.5です。以下は質問者様への補足（蛇足）の様なものですので、読み飛ばして下さって結構です。 続き番号にしたいという事は、本来、一つのリストなのでしょうからHTML側の理想としてはANo.5様の様なマークアップが妥当な事は確かです。ただ、positionとheightを併用する方法だと、アイテムの数が変わる毎に当然高さも変わってきてしまうので、CSS側の値の調整・再計算が必要になってきますね。3コラムのアイテムの数をできるだけ均等に配置したい場合は、3種類のclassの割り当てをその都度変更しなければならないアイテムも出てくるでしょうし。 一方、ANo.4様や私のアドバイスは1コラム毎にolを終わらせてHTML 4.01 Transitionalで非推奨のstart属性を使う方法ですし。アイテムの数の増減の際にはHTML側でのstart属性の値の変更のみで済む事は済みますが。 …まあ、どの方法を採用するかは質問者様の考え方一つで自由になさって良いのでは。floatを使う配置が間違いと定められたわけではないですし、floatにはpositionにはないメリットもありますから、特性を理解して不具合やブラウザ間の差を吸収する対処さえできるノウハウがあるのであれば別に問題ないと思います。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
とっても簡単に実現できますが・・・・ まず、 HTMLは正しく文法どおりに書きましょう。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/ )］より 文意から、通し番号にしたいということらしいですが、だとすると、divはおかしい、 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから <!ELEMENT OL - - (LI)+ -- ordered list --> ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Lists in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/lists.html#edef-OL )］より はっきりと、(LI)+ 一個以上のLI以外は含むことが出来ないと書かれている。 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ですので、HTMLのマークアップは、３列に表示したい場合は、下記のようになります。 <ol id="list"> <li class="left">リスト1</li> <li class="left">リスト2</li> <li class="left">リスト3</li> <li class="left">リスト4</li> <li class="center">リスト5</li> <li class="center">リスト6</li> <li class="center">リスト7</li> <li class="center">リスト8</li> <li class="right">リスト9</li> <li class="right">リスト10</li> </ol> 正しくマークアップで来たら、その上で、スタイルシートを書きますが、この場合は、本来表示される位置からずらすのですから、position:relativeを使うべきです。 ネット上には、やたらめったらfloatを使うものがありますが、本当にトラブルの原因になったりして悩みます。基本的にfloatを使ってブロックを配置すべきではありません。floatは、画像などの周囲に文字を回りこませるなど、本来の用途に限って使うようにするとよい。 ol#list{ display:block; padding:0.5em 1em; width:800px; height: 4.8em; /* ;ine-height×4 */ border: 1px solid red; } ol#list li{ position:relative; line-height: 1.2em; width: 240px; } ol#list li.center{ top: -4.8em; /* ;ine-height×4 */ left: 266px; } ol#list li.right{ top: -9.6em; /* ;ine-height×4×2 */ left: 532px; } ★注意事項 リストの１項目が設定したサイズより長くなると、ずれます。特に訪問者が文字サイズを大きくした場合など、よって余裕を持って配置すること。
- grumpy_the_dwarf
- ベストアンサー率48% (1628/3337)
非推奨なんだけど、hachi_08さんの回答をベースにしてそれぞれの リストでstart属性を使い、番号を無理矢理指定するってやり方がな きにしもあらずです。 <ol id="line1" start="1"> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ol> <ol id="line2" start="4"> <li>リスト4</li> <li>リスト5</li> <li>リスト6</li> </ol> <ol id="line3" start="7"> <li>リスト7</li> <li>リスト8</li> <li>リスト9</li> </ol> 美しくないですね。
- hachi_08
- ベストアンサー率58% (44/75)
#1、#2の方が仰っているように、<ol>の中に<div>はない方がいいです。 olに直接idを振るのはどうでしょうか？ また、IEでリストの数字が出ない場合はCSSに ol { list-style-position:inside; } を追加してみてください。 下記↓ソースを試してみて下さい。 こちらで確認しましたが、Firefox・IE・Operaともに問題なく表示されたと思います。 //-------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "?http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>参考リスト</title> <style type="text/css"> <!-- ol { list-style-position:inside; } #line1 { float: left; width: 150px; } #line2 { float: left; width: 150px; } #line3 { float: left; width: 150px; } --> </style> </head> <body> <ol id="line1"> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ol> <ol id="line2"> <li>リスト4</li> <li>リスト5</li> <li>リスト6</li> </ol> <ol id="line3"> <li>リスト7</li> <li>リスト8</li> <li>リスト9</li> <li>リスト10</li> </ol> </body></html> //--------------------------------------------
補足
ご回答有難う御座います。 ただ、この方法だと、私が意図するような表示が出来ません。 次の列に行くと再度１から表示されてしまいます。 1 4 7 2 5 8 3 6 9 の様に表示をさせたいのです。
- abril
- ベストアンサー率69% (388/560)
下記の様な記述は文法違反です。 <ol> <div id="line1"> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </div> <div id="line2"> （省略） </ol> olの直接の子要素として許可されているのはliのみです。まずはマークアップから修正した上で再度適切なスタイルを当てはめるべきですね。
- yambejp
- ベストアンサー率51% (3827/7415)
そもそもolの直下にdivはおけませんよ。 文法を無視しているので、挙動がおかしいのはしょうがないです
関連するQ&A
- floatをfooterに指定すると正しく表示ができない。
floatをfooterに指定すると正しく表示ができない。 画像の(3)のようにfooterにfloat:leftを指定しなければ綺麗に表示されるのは分かります。ところが、画像の(1)や(2)のように、footerにfloat:left;を指定して、次の行で<div style="clear:left"></div>と指定して、footerにfloat:leftを指定しなかったのと同様の処理をすると、(1)や(2)のようにwidthに対して様々な現象が起きてしまいます。 (1)はwidthを指定しない場合、width:auto;を指定した場合に見られ、(2)はwidth:100%;とした場合にwrapperよりはみ出すという現象が起きます。なぜ、floatを指定しないのと指定後解除するのとで同様の結果が得られずに違った結果になるのでしょうか？わかる方いらっしゃいましたら回答宜しくお願い致します。 以下はソースでそのままエディタに貼り付けると表示できます。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>サンプル</title> <style type="text/css"> <!-- /* default.css */ #container { background:red; border:10px solid fuchsia; padding:10px; } #left { float: left; width: 200px; height:100px; background:yellow; } #right { float: left; border:5px #000 solid; width: 200px; height:200px; background:black; color:#FFF; } #footer { float: left; height:200px; background:blue; border:5px #000 solid; color:#FFF; } --> </style> </head> <body> <div id="wrapper">WRAPPER <div id="header">HEADER</div> <div id="container">CONTAINER <div id="left">LEFT </div> <div id="right">RIGHT </div> <br style="clear:left"/> </div> <div id="footer">FOOTER </div> <div style="clear:left"></div> </div> </body> </html>
- ベストアンサー
- HTML
- float の clear
CSS によるレイアウトを試しています。 float を中断したいときにはその次の要素で clear=left|right する、というのは理解したのですが、この clear, 要素のネストを無視するのでしょうか。 たとえば次のソース <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>File Browser</title> <style type="text/css"> <!-- #leftside { background-color: #66FF00; float: left; width: 120px; height: 120px; } #rightside { background-color: #33CC99; margin-left: 120px; } #navlink .boxrow { float: left; height: 30px; width: 120px; background-color: #CC9999; margin: 5px; } #content { background-color: #CCFF99; height: 300px; clear: left; } --> </style> </head> <body> <div id="leftside"> </div> <div id="rightside"> <div id="navlink"> <div class="boxrow"></div> <div class="boxrow"></div> <div class="boxrow"></div> </div> <div id="content"> </div> </div> </body> </html> （rightside の要素の中なので）content の clear により navlink の直下に配置されて欲しいのですが、leftside の float まで clear してしまっているようです。 親の要素の中だけで clear することはできないのでしょうか？
- ベストアンサー
- HTML
- html+cssでfloatに関して
このやり方に問題があるかどうかを教えてほしいのと、 もっといいやり方があれば教えて頂きたいです。 まずやりたいことは3列並びで何段も下に続いて行くようなレイアウトにしたいのです。 で、1つのブロックのwidthが250pxです。そしてブロックとブロックの間が50pxです。 さらに、それを格納するボックスの幅が850pxです。普通にfloatさせてるようにすると3列に並ばず2列になってしまうので、ulのwidthを900pxにして解決したのですが、これは問題あるのでしょうか。 ソース <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"><!-- body{margin:0;padding:0;background:#fc0;} div{width:850px;background:#fff;margin:0 auto;} ul{width:900px;margin:0;padding:0;} li{width:250px;height:300px;float:left;display:inline;margin-right:50px;margin-bottom:50px;background:#0fc;} img{border:0;} --></style> </head> <body> <div> <ul> <li>内容</li> <li>内容</li> <li>内容</li> <li>内容</li> <li>内容</li> <li>内容</li> <li>内容</li> <li>内容</li> </ul> <br clear="all"> </div> </body> </html>
- ベストアンサー
- HTML
- float+IE8で形が崩れます。
float+IE8で形が崩れます。 Webクリエイターの模試をやっていたら以下のHTML <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" type="text/css" href="base.css"> <title>模擬</title> </head> <body> <div class="menu"> <h1>番号</h1> <ul> <li>トップ</li> <li><a href="spring.html">１</a></li> <li><a href="summer.html">２</a></li> <li><a href="autumn.html">３</a></li> <li><a href="winter.html">４</a></li> </ul> </div> <div class="season"> <p>ああああああああああああああああああああああああああああああああああああああああああああ</p> </div> </body> </html> を以下のcssと関連付けるものがあったのですが、 @charset "Shift_JIS"; body{ border:solid 1px #993366; width:800px; } h1{ color:#ffffff; background-color:#993366; font-size:140%; } h2 { font-size:120%; } ul{ line-height:200%; list-style:square; } .menu{ border-right:solid 1px #993366; width:150px; float:left } .season{ padding:10px; width:620px; } IE8で見るとまったく形が崩れてしまいます。 何故でしょうか？ これをIE6などで見るときちんとした形になると思うのですが、同じように表示するにはどうしたらよいのでしょうか？ なかなかうまくいきません。 よろしくお願いいたします。
- ベストアンサー
- HTML
- はみ出た部分が切れるように表示したいのですが
以下のHTMLですと、2個目のliの１２３…が2行目に表示されてしまいますが、 これを上と同じ行に表示し、divからはみ出た部分は切れるようにできないでしょうか？ 実際には1個目のliの長さが可変なため、HTMLと文字列（１２３…）を変えるのでなく CSSでなんとかしたいのです。 よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> div.d310 { width:310px; padding:0px; margin:0px; text-align:center; vertical-align:top; background-color:#ffffff; } ul { width:310px; height:20px; float:left; line-height:20px; font-size:13px; margin:20px 0px 0px 0px; padding:0px ; background:#f1f1f1; border-top:solid 1px #a9a394; } li.li1 { float:left; text-indent:12px; display:inline; margin:0px 10px 0px 10px; padding:0px 0px 0px 0px; } li.li2 { float:left; text-indent:19px; display:inline; margin:0px 10px 0px 0px; padding:0px 0px 0px 0px; } </style> </head> <body> <div class="d310"><ul> <li class="li1"><a href="">１２３４５６７８９０</a></li> <li class="li2"><strong>１２３４５６７８９０１２３４５６７８９０</strong></li> </ul></div> </body> </html>
- ベストアンサー
- CSS
- ホームページの質問です。
ホームページの質問です。 50音表を作りたいのですが、こんな感じのタグで大丈夫でしょうか？ ちょっと自信ありません。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <style type="text/css"> <!-- #iti { height: 25px; width: 300px; background-color: #FCF; float: left; clear: both; } #iti p { margin: 0px; } .ni { background-color: #9CF; height: 300px; width: 300px; float: left; clear: both; } ul { padding: 0px; margin: 0px; } ul li { width: 80px; float: left; height: 30px; background-color: #090; } --> </style> </head> <body> <div id="iti"> <p>あ行</p> </div> <div class="ni"> <ul> <li>あ</li> <li>い</li> <li>う</li> </ul> </div> <div id="iti">か行 </div> <div class="ni"> <ul> <li>か</li> <li>き</li> <li>く</li> </ul> </div> </body> </html> 問題点等ありましたら、指摘願います。また、修正点があれば教えてください。
- ベストアンサー
- HTML
- CSSーfloatについて
divの中にp要素を三つ作成して、最初のp要素にfloat:leftを指定しました。結果MacIEとIE6では2番目のpのみ右に並び、3番目のpは1番目のpの下にある状態です。しかも、FirefoxやSafari・Operaでは3つとも縦に並んだままです。単純なミスのようなきがするんですが解決できません。どなたか助けてください。よろしくお願いします。 以下のコードです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>無題ドキュメント</title> <style type="text/css"> <!-- #box{ background-color:#0099CC; width:400px; padding: 0px; } #A,#B,#C{ color:#FFFFFF; border:1px solid #fff; margin:0; } #A{ background-color:#990000; float:left; width:100px; } #B{ background-color:#003366; width:100px; } #C{ background-color:#336600; width:100px; } --> </style> </head> <body> <div id="box"> <p id="A">AAA</p> <p id="B">BBB</p> <p id="C">CCC</p> </div> </body> </html>
- ベストアンサー
- その他（プログラミング・開発）
- CSS：floatを使っての段組で困っています
図のような段組をしたいのですが、ソースはあっているでしょうか？ サイトを作成しているとズレたりするので、根本的な段組が間違っているのか見て頂けると助かります。 ■HTML <body> <div id="container"> <div id="box-2">box-2</div> <div id="box-3">box-3</div> <div id="box-4">box-4</div> <div id="box-5">box-5</div> <div id="box-6">box-6</div> <div id="box-7">box-7</div> <div id="box-8">box-8</div> </div> </body> ■CSS body { margin: 0 auto 0 auto; padding: 0px; height:100%; } #container { width: 800px; } #box-2 { float: left; width: 800px; height: 30px; } #box-3 { float: left; width: 400px; height: 300px; } #box-4 { float: left; width: 400px; height: 300px; } #box-567 { clear:left; float: left; width: 800px; } #box-5 { float: left; width: 300px; height: 200px; } #box-6 { float: left; width: 300px; height: 200px; } #box-7 { float: left; width: 200px; height: 200px; } #box-8 { clear:left; width: 800px; }
- ベストアンサー
- HTML
- float の clearfixで謎の空間が出現
現在、図のように表示されています。 本来であれば右側の「フロートテスト」という横並びのブロックがすぐ下に並んで表示させたいのです。 しかし、2つめが左側のサイドバーの終わりから表示されています。 サイドバーにも「フロートテスト」にもfloatとclearfixを使用しています。 clearfixを削除すると、wrapperが高さを持たないボックスになりますが、目的通りの縦に並んだ状態になります。 フロートが悪いのか、clearfixの設定or使い方が悪いのか。 原因が不明で悩んでおります。 よろしくお願いします。 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xml:lang="ja" lang="ja"> <head profile="http://gmpg.org/xfn/11"> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" href="common.css" type="text/css" /> <title>test</title> </head> <body style="background: #ffe6e6;"> <div id="wrapper" style="width:800px;background:#ffffff;border:1px solid red;" class="clearfix"> <div id="sidebar" style="width:200px;float: left;"> <div> <div> <ul><li><a href="index.html">サイドメニュー</a></li></ul> <ul><li><a href="index.html">サイドメニュー</a></li></ul> <ul><li><a href="index.html">サイドメニュー</a></li></ul> </div> </div> <div> <div style="border:1px solid #ccc;"> <p style="FONT-WEIGHT: bold; TEXT-ALIGN: center">サイドメニュー</p> </div> <div> <ul><li><a href="index.html">サイドメニュー</a></li></ul> <ul><li><a href="index.html">サイドメニュー</a></li></ul> <ul><li><a href="index.html">サイドメニュー</a></li></ul> </div> </div> </div> <!-- /sidebar --> <!-- contents --> <div id="contents" style="margin-left: 200px;" class="clearfix"> <div class="clearfix"> <div style="float:left;width:50%;"> <div style="border:1px solid green"> <p>フロートテスト</p> </div></div> <div style="float:right;width:49%;"> <div style="border:1px solid green"> <p>フロートテスト</p> </div></div> </div> <div class="clearfix"> <div style="float:left;width:50%;"> <div style="border:1px solid green"> <p>フロートテスト</p> </div></div> <div style="float:right;width:49%;"> <div style="border:1px solid green"> <p>フロートテスト</p> </div></div> </div> </div><!-- /contents --> </div><!-- /wrapper --> </body> </html> common.cssで読み込んでいるclearfix の部分 .clearfix:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; } .clearfix { display: inline-block; } * html .clearfix { height: 1%; /* Hides from IEmac \*/ } .clearfix { display: block; }
- ベストアンサー
- CSS
- float:left; したものを右寄せ
<div style="text-align:right;"> <ul> <li style="float:left;">リスト</li> <li style="float:left;">リスト</li> <li style="float:left;">リスト</li> </ul> </div> リスト要素を横に並べるようにfloat:left;をいれたものを、 画面右寄せにするにはどうすればいいでしょうか。 上のソースではtext-align:right;が効かず左よせになってしまいます。。 よろしくお願いいたします。
- ベストアンサー
- HTML
お礼
ご回答有難う御座いました。 表示的にはこの方法が一番見た目的に近いかと思います。 この方法で作成を使用かと思います。