- ベストアンサー
ボックス内に並べた幅の不定なliのセンタリング方法
- ulの幅を決め、liを横並びさせる方法について説明します。
- liの幅が不定なボタンをボックス内に並べ、各行でセンタリングさせる方法を解説します。
- さまざまなブラウザに対応するためのセンタリング方法をご紹介します。
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- 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
- <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
- リストの「・」をセンタリングする方法について
<ul style="text-align:center"> <li><a href="XX">項目１行目</a></li> <li><a href="YY">項目２行目</a></li> </ul> このようにしてリスト表示をセンタリングさせており、 ブラウザチェックをしていたらFire Fox(3.5.8)、Chrome(4.0.249.89)、safari(4.0.4) で表示が ・ 項目１行目 ・ 項目２行目 となってしまい、文字はセンタリングしてくれましたが、「・」がブラウザの左端に寄ってしまい センタリングしてくれません。他のブラウザ(IE、opera)では「・」もセンタリングされているのですが… テーブルの時も同じような現象に陥ってしまい、 margin-left:auto;margin-right:auto;と指定する事で回避出来たのですが、 今回も同様の方法で<ul style="margin-left:auto;margin-right:auto;">やってみましたが、無反応… で、今度はautoではなくてpx数で指定すれば上手く「・」が移動してくれたのですが、ブラウザ画面を 小さくしてしまうと文字が潰れてしまい、断念。 更にlist-style-type:none;で指定してやれば見た目的にはセンタリングしていますが、「・」が無いので いまいち… どのようにしたらこれらのブラウザでちゃんと「・」がセンタリングするようになるのでしょうか？ よろしくお願い致します。
- ベストアンサー
- HTML
- 可変レイアウト時の、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
- cssでリストを横並びのセンタリング
現在、サイトをHTMLからHTML5に移行中なのですが、リストを横並びにするところまではできたのですが、それをセンタリングするにはどうしたら良いでしょうか？ さまざまなサイトを巡ってやり方を拝見したのですが、目的とするものがありませんでした。 現在のHTML <!-- ヘッダ開始 --> <div id="header"> <h1>サイトタイトル</h1> <p class="catch"><strong>サイト説明</strong></p> <div class="opening"> <h2><img src=".jpg" alt="表示されなかった画像の説明的な" width="900" height="260"></h2> </div> <ul class="nl clearFix"> <li class="active"><a href="#">１</a></li> <li><a href="#">２</a></li> <li><a href="#">３</a></li> <li><a href="#">４</a></li> <li><a href="#">５</a></li> <li><a href="#">６</a></li> <li><a href="#">７</a></li> </ul> <hr class="none"> </div> <!-- ヘッダ終了 --> 現在のcss /* --- ヘッダメニュー --- */ #header ul.nl { width: 100%; /* IE 6のために幅の指定が必要 */ margin: 0 auto; padding: 0; background-color: #ffffff; /* ヘッダメニューの背景色 */ list-style-type: none; text-align: center; } /* メニュー項目 */ #header ul.nl li { width: 124px; /* 項目の幅 */ float: left; line-height: 100%; } /* 最初の項目と最後の項目 */ #header ul.nl li.first, #header ul.nl li.last { width: 125px; /* 項目の幅 */ } わかりにくいと思いますが、上のように配置したいのです。 まだイマイチ理解しきれていないのですが、回答していただければと思います。 ↓HPの現状。 http://dateme.web.fc2.com/top.html
- ベストアンサー
- CSS
- float:leftで<li>要素を横並びさせてから、中央揃えする方法は？
ＨＴＭＬ <dir id="footer"> <ul> <li>個人情報保護方針</li> <li>サイトマップ</li> <li>組織概要</li> <li>お問い合わせ</li> </ul> </dir> ＣＳＳ #footer ul li{float: left;} 上記の場合、li要素は横並びするのですが、 <div>要素の中で中央揃えするには どうしたらいいのでしょうか？
- ベストアンサー
- HTML
- 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 の設定を教えてください よろしく、お願いします
- ベストアンサー
- ホームページ作成ソフト
- liタグをＣＳＳで指定して、レイアウトに用いています。背景色をつけたいのです。
ＣＳＳでレイアウトして、サイトを作成しています。 ＜ＣＳＳ部分＞ ul.box { zoom: 100%; list-style: none; padding: 0; margin: 0; } ul.box:after { height: 0; visibility: hidden; content: ""; display: block; clear: left; } ul.box li { float: left; width: 240px; background-color: #ffffff; border: solid 1px; padding: 1px; margin: 5px; ＜ＨＴＭＬ部分＞ <ul class="box"> <li>テーマＡ</li> <li>テーマＢ</li> <li>Ａの説明</li> <li>Ｂの説明</li> <li>テーマＣ</li> <li>テーマＤ</li> <li>Ｃの説明</li> <li>Ｄの説明</li> </ul> 以上のような感じです。ＨＴＭＬ部分はこのＵＬをさらに囲っている親要素があるのですが、それの幅があるので、横並びに２つ並んでいて、縦には４つboxが並んでいるような状態です。 ですので、ちぐはぐのような感じになっています。 問題はこのテーマとかかれているところだけに背景色をつけたいのですが、どうしてもできません。 http://htmltag.1.tool.ms/153/ こちらのサイトを見て <li bgcolor="#ffdddd">をやってみても色はつきません。 どうやればよいのでしょうか。 ＣＳＳ自体変更した方がよいのでしょうか。
- ベストアンサー
- HTML
- CSSでflotさせた要素を親要素で幅いっぱいに表示したい
以下のHTMLソースで、リストをfloatで横並びにし、 親のdivに対して3列ずつで左右余白なく幅いっぱいに 表示させたいと考えております。 <div> <ul> <li><img></li> <!-- 複数リストを繰り返し --> <li><img></li> </ul> </div> 例えば以下のようなCSSを書いた場合、 div {width:500px;} li {float:left; width:150px; margin-left:10px;} 左端はそろいますが、右端に余白が出来てしまいますよね。 各リストに対して左端用クラス、右端用クラスみたいなものを 指定すれば実現は可能だと思いますが、出来るだけHTMLを編集せず 実現したいと考えております。 IE6~7・safariでとりあえず表示させたいです。 どなたか知識のある方、ご教授の程よろしくお願いいたします。
- ベストアンサー
- 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
お礼
お返事ありがとうございます。 左寄せをセンタリングしたいというのも考えてみれば矛盾してますね。 左寄せでいこうと思います。