- ベストアンサー
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;が効かず左よせになってしまいます。。 よろしくお願いいたします。
- webmad
- お礼率97% (44/45)
- HTML
- 回答数1
- ありがとう数13
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
<ul style="float:right;"> <li style="float:left;">リスト1</li> <li style="float:left;">リスト2</li> <li style="float:left;">リスト4</li> </ul> で、どうでしょう？
関連するQ&A
- リストを全体的に右寄せにしたい。
リストを横並びにしました。 これを大きいdivで囲んだ中の右寄せにするにはどうしたらよいのでしょうか。 #ex { width: 100%; background-color: #66CCFF; height: 28px; } #ex ul { list-style: none; } #ex li { margin: 0px; padding: 5px 0px 5px 30px; list-style: none; float: left; background: url(***.gif) no-repeat 10px 0.5em; } <div id="ex"> <ul> <li><a href="#">リスト</a></li> <li><a href="#">リスト</a></li> </ul> </div>
- ベストアンサー
- HTML
- 【CSS指定方法の質問】幅を指定せずに右寄せ、一列表示するには
はじめて質問します。よろしくお願いいたします。 下記のようなマークアップがあります。 <div id="naviWrap"> <div id="navi"> <ul> <li><a href="#">ホーム</a></li> <li><a href="#">ログイン</a></li> </ul> </div> <div class="search"><form name="" action="hoge" method="get"> <input type="text" name="keyword" size="6" maxlength="30" style="width: 100px" /> <input type="submit" value="検索" /></form> </div> </div> これを、右寄せで、一列で表示しようとしています。 #naviWrapにwidthを指定してfloat:rightとして #navi と .search にtext-align:right;を指定して display:inline;としましたが、#navi と .searchが右寄せで縦に並んでしまいます。 ブロック要素に幅を指定してfloatで並べる方法なども試しましたが、フォントサイズを大きくした場合横にのびて欲しいのでインライン要素で横に並べる方法を模索しています。 どのようにCSSで指定すればよいのでしょうか？マークアップの変更も必要でしょうか？ 実現したい表示のイメージを添付します。
- ベストアンサー
- HTML
- floatでカラム落ちを防ぎたい
少し長いですがお付き合いよろしくお願いいたします。 <style type="text/css"><!-- body { text-align:center; } #all { width:730px; margin-left:auto; margin-right:auto;; text-align:left; background-color:#33ffcc} #left{width:50%; float:left;} #right{width:50%; float:left;} --></style> </head> <body> <div id="all"> <h1>見出し1</h1> <div id="left"> <h2>AAA</h2> <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> <h2>BBB</h2> <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> <h2>CCC</h2> <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> </div> <div id="right"> <h2>AAA</h2> <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> <h2>BBB</h2> <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> <h2>CCC</h2> <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> <h2>DDD</h2> <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> <h2>EEE</h2> <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> </div> </div> このように記述するとFirefoxではallで指定した背景色がh1にしか反映されず、left、rightの高さのずれている部分には反映されません。 この記述から、スタイルシートのrightに何も指定しないようにすると、allに指定した背景色はきちんと反映されるんですが、今度はleftよりrightのコンテンツが多いためカラム落ちしてしまいます。 どのように、記述すれば背景色がうまく反映され、カラム落ちを起こさずに済むのでしょうか？ 条件はFirefox,Opera,IE6でほぼ同じレイアウトが表現でき、tableやoverflowは使わない事です。
- ベストアンサー
- CSS
- IE7でfloat:leftが効かない問題
表題の件でご質問がございます。 現在 <ul> <li><img src="XXX" ></li> <li><img src="XXX" ></li> <li><img src="XXX" ></li> </ul> と <div>YYYYY</div> <div>YYYYY</div> <div>YYYYY</div> の二通りで<li>と<div>にclassを設定し、 .list {float:left;} と設定しているのですが 全て縦に並んでしまいます。 chrome safari IE8,9 firefoxでは全て狙い通り水平型リストになっているのですが IE７のみうまく行きません。 どなたかご教示戴ければ幸いでございます。
- ベストアンサー
- CSS
- floatを使ってリストを並べたところ
floatを使ってリストをならべたところ、それ自体はちゃんと表示されるのですが、別の部分がIEで表示されなくなりました（FireFoxでは表示されます）。 float要素を取り払うと、消えてしまう部分はちゃんと表されているので、floatに何か問題があるようなのですが…。 お分かりになられるかた、ご助言いただければ助かります。 以下、記述を書きます。 CSS記述 .catch{ margin:10px; font-size:20px; } .w-icon ul{ list-style-type:none; margin:0px; } .w-icon li{ float:left; text-align:center; } .w-icon a{ display:block; width:110px; height:25px; text-decoration:none; } HTML記述 <div class="catch">キャッチコピー</div> 本文 <div class="w-icon"> <ul> <li><a href="#">メニュ－１</a></li> <li><a href="#">メニュ－２</a></li> <li><a href="#">メニュ－３</a></li> </ul> <div style="clear:both;"></div> </div> 以上のように記載したところ、キャッチコピーの部分から本分の途中までブランク表示になります。 カーソルで選択すると文字は出てくるのですが…。 どうぞよろしくお願い致します。
- ベストアンサー
- CSS
- <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
- １行内に『左寄せ／センタリング／右寄せ』を同時に書くことは可能でしょうか
ホームページ作成ウェブ講座で、「floatプロパティ用いいると1行内に左寄せと右寄せを同時に書ける」と言うのを目にしましたが、「１行内に『左寄せ／センタリング／右寄せ』を同時に書く」ことは可能でしょうか。 同講座の説明に従って、以下のスクリプトを作成しましたが、sub1／sub2／sub3の３行が全て左側に縦に並べて表示され、３行以下のhtmlスクリプトもそのまま表示されました。また文字は多少大きめですが、文字色は黒で、指定は無視されました。 <div class="titlebar"> <div class="sub1">Relationship with China and Korea</div> <div class="sub2">对中韩关系说起</div> <div class="sub3">中韓問題に触れて</div> div.sub1 { text-align: left; float: left; } div.sub2 { text-align: center; float: center; } div.sub3 { text-align: right; } div.titlebar { background-color:#cc0000; color:white; font-weight:bold; padding:0.1em; }
- ベストアンサー
- ブログ
- CSS で li を float させる方法
リスト項目を横並びにfloatさせたいいんですが、 li {list-style:none url(../image/icon/article.png) inside;} と指定すると、floatできないようです。 どうすればlist-styleを指定したliをfloatさせることできますか？ コートは以下のようにしています。 よろしくお願いします。 【HTML】 <div class="YYY"> <ul> <li class="movie"><a href="">MOVIE</a></li> <li class="photo"><a href="">PHOTO</a></li> </ul> </div> 【CSS】 .YYY {margin:10px 0;} .YYY ul {margin:0px;padding:0px;} .YYY li.photo {float:left;list-style:none url(photo.png) inside;} .YYY li.movie {float:left;list-style:none url(article.png) inside;}
- ベストアンサー
- HTML
- float:leftを使用して全体を中央寄せしたい
html勉強中のものです。 float:leftを使用したdivすべてbody全体の中央寄せにしたいです。 下記のソースから教えて下さい。 html -------------- <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="shift_jis"> <title>Director Blog</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <header> <hgroup> <h1 id="header">Why not?</h1> </hgroup> <ul class="header"> <li>menu</li> <li>info</li> <li>list</li> </ul> </header> <div class="float left"> <div class="cc"><p><img src="images/Dragon+Ash+02_02.jpg" width="200" height="150"> </p> <h1 class="float left"> Miyuki Yamanaka</h1> <p class="float left"> Photographing and questioning. Miyuki is a Japanese photographer. Her inspiration comes from the mundane scenes, which often relates to nostalgia and obsolescence. She explores the</p> </div> </body> </html> -------------- css -------------- charset "utf-8"; /* ---------------------------------------------- This style definition is initiarize. ------------------------------------------------- */ body , div , header, dl , dt , dd , ul , ol , li , h1 , h2 , h3 , h4 , h5 , h6 , pre , form , fieldset , input , textarea , p , blockquote , th , td { margin-right: 0 auto; margin-left: 0 auto; padding: 0 auto; } div.float left{ float:left; } div.cc { width:200px; background: #FAFAD2; float: border-style: none; margin-right: auto; margin-left: auto; padding: 20px; position: relative; overflow: hidden; layout-grid-line:200px; border-radius: 5px; -webkit-box-shadow: 1px 1px 3px #000; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; -o-box-sizing: content-box; box-sizing: content-box; } -------------- よろしくお願いします！
- 締切済み
- CSS
- 可変レイアウト時の、floatしたulの中央寄せ
floatしたulをセンタリングする為、以下のソースを記述しました。 <section> <ul> <li>ボタン1</li> <li>ボタン2</li> </ul> </section> section { position: relative; overflow: hidden; } section ul{ float:left; left:50%; position:relative; } section ul li{ float:left; left:-50%; position:relative; width:150px; margin-right: 5px; } ひとまずはそれで上手くいったのですが、スマホサイトなので横幅を可変にしたいと思い section ul li{ float:left; left:-50%; position:relative; width:40%; margin-right: 5px; } に書き換えた所、リストの横幅がすごく狭くなってしまいました。 ％幅で横に2つ並んだリストボタンをセンタリングさせられれば、 potisionを使用したセンタリングにこだわっているわけではありませんが 自分で思いつく限りを試しても解決に至らず、質問させていただきました。 html5、css3で記述しています。 詳しい方がいらっしゃいましたら、よろしくお願い致します。
- ベストアンサー
- CSS
補足
感激です！ ありがとうございます！！