- ベストアンサー
ul li を inlineにすると、右から順にリスト表示されます
いつもお世話になっております。 基本的なことかもしれませんが、解決できずに困っているので どなたかアドバイスを頂けませんでしょうか。 希望はA,B,Cを左から順に並べて表示させたいのですが、 現在C,B,A となってしまっています。 (希望： A B C 現在： C B A) ---- html ---- <div class="link"> <ul> <li><img src="A.gif"></li> <li><img src="B.gif"></li> <li><img src="C.gif"></li> </ul> </div> ---- css ---- .link ul, li { display: inline; float: right; } これ以降、他の個所（別のclassなど）でul記述しても 全て同様の現象が起きております。 何が原因と考えられますでしょうか？
- milkcan79
- お礼率80% (12/15)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
liを右寄せしているからですね 右寄せしたいするのはulでliは左から順に処理をいれないと・・・ <style> .link ul{ float: right; list-style:none; } .link ul li { display: inline; float: left; } </style> <div class="link"> <ul> <li>A</li> <li>B</li> <li>C</li> </ul> </div>
その他の回答 (1)
- dezimac
- ベストアンサー率56% (2365/4208)
『float: right;』が原因です。 display:inline;にしたらfloatは不要です。 floatは画像やBlock要素を左右に寄せて回り込みをさせる為に使います。
お礼
迅速なご回答誠にありがとうございます！！ 無事解決いたしました。 おかげさまで知識がまた一つ増えました<(_ _)>
関連するQ&A
- liの数によってulの横幅を動的に設定したい
以下のようなhtmlがあったとして、ul.imageの幅をliの数によって動的に設定したいのですが、 jQueryで指定する場合どう書けばいいのかご教授下さい。 liはfloatしているものとします。 ====================================================== <div class="block"> <ul class="image"> <li><img src="hoge.jpg" alt="" /></li> <li><img src="hoge.jpg" alt="" /></li> <li><img src="hoge.jpg" alt="" /></li> </ul> </div> <div class="block"> <ul class="image"> <li><img src="hoge.jpg" alt="" /></li> <li><img src="hoge.jpg" alt="" /></li> <li><img src="hoge.jpg" alt="" /></li> <li><img src="hoge.jpg" alt="" /></li> <li><img src="hoge.jpg" alt="" /></li> <li><img src="hoge.jpg" alt="" /></li> </ul> </div> <div class="block"> <ul class="image"> <li><img src="hoge.jpg" alt="" /></li> </ul> </div> ...以下、いくつも.blockが続きます
- ベストアンサー
- JavaScript
- float横並びにしたブロックの中のul/liを縦並びにさせたい
float leftで横並びさせている中でul/liを縦並びにさせたい。現在はすべて横並びしてしまう。 （html） <div class="base"> <div class="box1"> <a href="#"><img src="#" alt=""></a> </div> <div class="box2"><img src="images/spacer.gif" width="1" height="1" alt=""></div> <div class="box3"> <ul class="list-y"> <li>ああああ</li> <li>いいいい</li> <li>うううう</li> <li>ええええ</li> <li>おおおお<a href="#">かかか</a></li> </ul> </div> </div> （css） ul{ margin: 0; padding: 0; list-style-type: none; text-decoration: none; display: block; } li { margin: 0; padding: 0; display: inline; } .base { width: 618px; height: 100px; margin: 0; padding: 8px 10px 0 10px; text-align: left; line-height: 1.5em; background-image: url(../images/content_bg.gif); background-repeat: repeat-y; } .base .box1 { width: 130px; height: 97px; margin: 0; padding: 0; float: left; outline: solid 2px black; } .base .box2 { width: 2px; height: 100px; margin: 0 5px 0 10px; padding: 0; float: left; border-right: dotted 2px #ccc; } .base .box3 { margin-left: 157px; padding: 0; font-weight: bold; text-align: left; } .list-y{ clear: both; } CSSに疎いのでよろしくお願いいたします。
- ベストアンサー
- CSS
- inline-blockでliが横並びになりません
inline-blockを使って<li>を横並びにしようとした所、IE、chrome、fox(最新版)で 確認すれば横並びにはなっていますが、Dreamweaver cs4で見ると縦並びのままで、 使用する予定のブログで確認しても縦並びのままです。 ブログのテンプレCSSも見直しましたが原因になりそうなのが見つからず、 Dreamweaverでも横にならないので何か間違っているのかなと思いますが、 何を間違えているのかがわかりません。。。 なお、liは入り子で使用するつもりなのですが、該当するliだけ横にするのは問題ありでしょうか? また、画像サイズは縦長・横長サイズが混在するので下記のようにしてますが、関係してるのでしょうか? イメージ的には添付画像のようなのを希望してます。 すいませんが、ご教授お願いします。 <style type="text/css"> li.e { display:inline-block; vertical-align:top; text-align: center; overflow:visible; width:150px; } li.e img { max-height:100px; width:150px; } </style> <ul> <li class= "h">あいうえお</li> <li class= "w"> <ul> <li class= "e"><a href="./a.jpg" ><img src="./a.jpg"><br> あああああああああああああああああ</a></li> <li class= "e"><a href="./a.jpg" ><img src="./a.jpg"><br> いいいいいいいいいいいいいいいいいい</a></li> <li class= "e"><a href="./a.jpg" ><img src="./a.jpg"><br> うううううううううううううううううう</a></li> <li class= "e"><a href="./a.jpg" ><img src="./a.jpg"><br> ええええええええええええええええええええ</a></li> </ul> </li> </ul>
- ベストアンサー
- CSS
- ul liのclass指定について
表示が上手くいかないのでお助け下さい。 ul liのliにclass指定をして、それぞれのclassに異なる背景画像を表示させようとしているのですが、 なぜかclass指定をすると画像が消えてしまいます。 class指定をしない状態ですと普通に表示されるのですが、別々の画像を表示させたいと思っているので困っています。 どなたか教えて頂けないでしょうか？ また、申し訳ありませんがとりあえず表示されれば良いだけなので htmlやcssの記述に対する細かいツッこみは勘弁して下さい。 宜しくお願いします！ 【html】 <div id="side"> <ul id="sidenav"> <li class="a"><a href="test.html">test</a></li> </ul> </div> 【css】 div#side { display: inline; float: left; width: 178px; margin-top: 20px; text-align:center; background:#fff; } div#side ul#sidenav { list-style-type:none; border: none; } div#side ul#sidenav li.a { background:url(../common/side.gif) no-repeat left; background-position: 6px 11px; } div#side li { position:relative; width: 165px; height:40px; padding: 1px; margin: 5px; text-align:left; border: 1px solid #8c8c8c; }
- ベストアンサー
- CSS
- ul/liタグでのリスト表示におけるレイアウト崩れについて
ul/liタグでのリスト表示におけるレイアウト崩れについて 現在、タブコントロールの画面を作成しているのですが、 画面のレイアウトが崩れてしまう現象が発生しています。 2日間デバッグしてみたのですが解決しませんでしたので、 現状のHTMLの抜粋をご提示致しますので お手数ですがご助言して頂けないでしょうか。 ■タブコントロール画面について 画面上にタブを新規に作成するボタンがあり、 そのボタンを押下することによりjavascriptで ul/liのコードを動的に作成しています。 (prototype.jsを使用しています。) タブは画面上最大5個まで同時に表示できますが 6個以上になった場合は、タブコントロールの両端に スクロールボタン(「戻る」・「進む」)を表示するようにしています。 また、対象のタブをクリックされた場合には画像で「閉じる」ボタンを 表示するようにして、閉じるボタンを押下した場合はその タブを消去するようにしています。 なお、タブコントロールの完成イメージとしては以下のサイト のようなものを目指しています。http://members.ecnavi.jp/ (タブコントロールの下にパネル部分があり選択されたタブ においては、タブのボトム部分の線が隠れる仕様です。) ■現象の詳細 タブが6個以上になり「戻る」ボタンを表示した際にタブ部分が 「戻る」ボタンの半分程度の高さに浮き上がって表示されてしまいます。 なお、「進む」ボタンに関しても同様です。 ※浮き上がってしまっているタブの枠線下部には線は引かれていません。 □□□□□ □ (実際は、上段の□が高さ半分程度下に下がるイメージです。) #####生成されたHTMLの抜粋##### <div id="myTab"> <ul class="tabs"> <li class="LRButton" style="width: 18px; height: 27px; background-color: rgb(176, 196, 222);"> < </li> <li title="6:1f"><div style="width: 89px; height: 27px; overflow: hidden;" class="ItemIdle"> <div style="width: 69px; font-size: 12px; padding: 5px; overflow: hidden; float: left;">6</div> <div style="float: right; display: none;"> <a href="javascript:void(0);"> <img src="./images/Close.gif" style="width: 14px; height: 14px; border: medium none; margin-right: 2px; margin-top: 2px;" title="close"> </a> </div> </div> </li> <li class="tab-active" title="6:1fffff"> <div style="width: 89px; height: 27px; overflow: hidden;" class="ItemSelected"> <div style="width: 59px; font-size: 12px; padding: 5px; overflow: hidden; float: left;">6</div> <div style="float: right; display: block;"> <a href="javascript:void(0);"><img src="./images/Close.gif" style="width: 14px; height: 14px; border: medium none; margin-right: 2px; margin-top: 2px;" title="close"> </a> </div> </div> </li> </ul> </div> <div class="panel"> <table width="825px" cellspacing="0" cellpadding="0" border="0"> <tbody> <tr>
- 締切済み
- HTML
- <li>をfloat,inlineさせたときのセンタリング
スタイルシートを用いて、ナビゲーションバーを作っています。 リスト<li>をfloatさせて、横に長いものにしていますが、 1行では収まらないため、2行になっています。 リストにfloat:leftとinlineを指定することで、普通のテキストのように<div>ボックス内に流し込んで、端でいっぱいになったところで自動的に改行させています。 <div id="header"> <ul id="navi"> <li>トップ</a></li> <li>ページ１</li> <li>ページ２</li> <li>ページ３</li> </ul> </div> #header #navi li{ float:left; display: inline; } 実際には10個ぐらいあるのですが、説明のため上のように4つのアイテムがあるとして、説明すると、今は トップ ページ１ ページ２ と表示され、次の行で、"トップ"の左側に揃って ページ３ が表示されます。 やりたいことは、1行目のちょうど真ん中、（この場合"ページ１"の下あたり）に"ページ３"を表示させたいのです。 #header{ text-align:center; } または #header ul{ text-aligne:center; } で良いのかと思ったのですが、うまくいきません。 こういったことはできるのでしょうか？ そもそも、やり方がまちがっていますか？ <li>に対してfloatを解除すると、センタリングされるのですが、<li>同士の間にスペースが出来てしまいます（バックグラウンドに色が付いているので）。どちらかというとこちらをなんとかするようにしたほうがいいのでしょうか？
- 締切済み
- HTML
- CSS リスト 外枠から文字と画像がはみ出る clearfix
｜ーーーーーーーーーーーーーーーーーー｜ ｜｜ーーーー｜ →1111 →444 →777 ｜ ｜｜ 画像 ｜ →2222 →555 →888 ｜ ｜｜ーーーー｜ →3333 →666 →999 ｜ ｜ーーーーーーーーーーーーーーーーーー｜ 質問お願いします。 上記のように、左に画像があり、その横にリストが3つ並んでいる状態で1ｐｘの外枠をつけたいのですが、 外枠が上一行目の所までしか囲んでくれません。 （※→は矢印の画像です） CSSの方に入っている.clearfixを使うとよいそうですが、 HTMLのどの部分に入れても上手く表示されません…。 どのように使えばいいのでしょうか？ またどこか間違っている所があるのでしょうか？ よろしければご教授ください。 ソースです。 --------------------------------- html <div class="box"> <img src="000000.gif" class="imgL"/> <ul> <li><img src="img/yajirusi.gif" /> 1111</li> <li><img src="img/yajirusi.gif" /> 2222</li> <li><img src="img/yajirusi.gif" /> 3333</li> </ul> <ul> <li><img src="img/yajirusi.gif" /> 4444</li> <li><img src="img/yajirusi.gif" /> 5555</li> <li><img src="img/yajirusi.gif" /> 6666</li> </ul> <ul> <li><img src="img/yajirusi.gif" /> 7777</li> <li><img src="img/yajirusi.gif" /> 8888</li> <li><img src="img/yajirusi.gif" /> 9999</li> </ul> </div> --------------------------- css .imgL { float: left; margin: 0 10px 10px 0;} .box { border:1px #CCCCCC solid; padding:5px;} .box ul{ float:left;} .clearfix:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; } .clearfix { display: inline-block; } /* exlude MacIE5 \*/ * html .clearfix { height: 1% } .clearfix {display:block;} /* end MacIE5 */
- ベストアンサー
- HTML
- <ul><li></li></ul>にするメリットって？
<ul><li></li></ul>にするメリットって？ こんにちは。お世話になっています。 色んな方のソースを見ていると、 例えば 「ABOUT」「SERVICE」「COMPANY」・・・という項目を並べる際に <ul> <li id="about">ABOUT</li> <li id="service">SERVICE</li> <li id="company">COMPANY</li> </ul> という風にリスト化する方が多いと思うのですが中には <div id="contents"> <div class="about">ABOUT</div> <div class="service">SERVISE</service> （略） </div> という風にdivで括る方もいると思います。 （※私はdivで括るタイプです。） また。 <dl id="contents"> <dt class="about">ABOUT</dt> <dt class="service">SERVICE</dt> （略） </dl> という風に<dl><dt></dt></dl>括る方もいると思います。 それぞれのメリットってなんでしょうか？ 特に<ul><li></li></ul>という風に括ってる方がおおいと思うので <ul><li></li></ul>にするメリットが知りたいです。
- 締切済み
- HTML
- CSSの左横に隙間ができてしまいます。
画像の左横に謎の隙間(8mmほど)ができて埋まりません。 そのため、4枚収めたい画像のうち、最後の1枚が改行されてしまっています。 padding や vartical-align、text-alignなど試してみましたが、ダメでした。 とても困っています、どなたかご教示くださいますようお願いいたします。 << CSS >> #header { width:940px; height:59px; margin: 0 0 20px 0; } #logo { width:300px; height:59px; float:left; margin: 0 20px 0 0; } #menu { width:620px; height: 59px; padding: 0; margin: 0; float:right; } #menu img { padding-top:8px; border:none; } #menu ul { margin:0; } #menu ul li { margin: 0px; padding: 0px; list-style-type: none; display:inline; float:left; } << HTML >> <div id="header"> <div id="logo"> <img src="img/logo.gif" width="298" height="59" alt="ロゴ"> </div><!-- /#logo --> <div id="menu"> <ul> <li><img src="img/btn_A.gif" width="194" height="51"></li> <li><img src="img/btn_B.gif" width="140" height="51"></li> <li><img src="img/btn_C.gif" width="149" height="51"></li> <li><img src="img/btn_D.gif" width="137" height="51"></li> </ul> </div><!-- /#menu --> </div><!-- /#header -->
- ベストアンサー
- CSS
- 【CSS】右側エリアがずれ込む
CSS初心者で、会社のサイトの変更をしています。 現状メイン画像1枚のレイアウトだったところを 差換えでjavascriptで画像を切り替え、リンク先も変更できるようにしました。 はめ込んだところ、右側のボタンがずれ込みます。 何をどうしたら解決できるかわかりません。 どうしたら修正できますでしょうか。 よろしくお願い申し上げます。 ≪修正前のレイアウト≫ □□□□□□□□□ ■■■■■ □□メイン画像□□ ■ボタン■ □□□□□□□□□ ■■■■■ 【HTML】 <div id="keySpace"> <p> <a href="shopping/index.html"><img src="img/key.jpg" border="0" /></a></p> <ul> <li><a href="shopping/index.html"><img src="img/btn_service.gif" width="205" height="54" class="imgover" /></a></li> <li><a href="info/member.html"><img src="img/btn_member_end.gif" width="205" height="54" class="imgover" /></a></li> </ul> </div> 【CSS外部】 #keySpace { width: 860px; margin: 0px auto; padding: 0px 0px 7px; background: #FFF; } #keySpace p { width: 643px; margin: 0px 12px 0px 0px; float: left; display: inline; } #keySpace ul { width: 205px; float: right; } #keySpace ul li { margin: 0px 0px 3px; } ≪修正後のレイアウト≫ □□□□□□□□□ □□メイン画像□□ □□□□□□□□□ ■■■■■ ■ボタン■ ■■■■■ 【HTML】 <div id="keySpace"> <p> <div id="link1"> <a href="index.html"><img border="0" src="img/top_01.jpg" /></a></div> <div id="link2" class="banner"><a href="shopping/index.html"><img border="0" src="img/top_02.jpg" /></a></div> </p> <ul> <ul> <li><a href="shopping/index.html"><img src="img/btn_service.gif" width="205" height="54" class="imgover" /></a></li> <li><a href="info/member.html"><img src="img/btn_member_end.gif" width="205" height="54" class="imgover" /></a></li> </ul> </div> 【CSS】上記に追加 <style type="text/css"> .banner { display:none; } </style>
- ベストアンサー
- HTML
お礼
迅速なご回答誠にありがとうございます！！！ 即座に解決いたしました。 独学なので曖昧に理解しているところが多いみたいです（泣