人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

数が決まっていないボタンの中央寄せ

お世話になります。Javascriptにて数の決まっていないボタンをまずは縦に配置し
そこ数が一定以上になると新しい列とする、といった形で配置したボタンを中央寄せにしたいと考えています。

配置はアルファベット順
・ボタンが3個以下の場合
| A |
| B |
| C |
・ボタンが4個以上6個以下の場合
| A D |
| B E |
| C F |

potisonでstaticやrelative/absoluteで設定するにもどうしても中央寄せという部分で
実現ができませんでした。

●質問者: teioh12
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● POGPI
ベストアンサー

ボタンを各々liタグでくくったのを三個ずつolタグでくくって、olをdivタグでくくればできそうですね。cssでdivタグにtext-align:centerとしてください。


teioh12さんのコメント
pogpiさん 回答ありがとうございます 回答を元に組んでみたのですが、ABCの下にDEFが出てきてしまい ABCの横には配置できませんでした。 positionで指定するにしても結果同じになってしまいました

POGPIさんのコメント
cssで、olタグにfloat:leftを指定してください。

teioh12さんのコメント
回答ありがとうございます。 下記のように組んだのですがやはり中央寄せにはなりませんでした data-role="button"を外しても結果は同じです >|html| <html> <link rel="stylesheet" href="jquery.mobile-1.3.1.min.css" /> <script src="js/jquery-1.11.1.min.js"></script> <script src="js/jquery.mobile-1.3.1.min.js"></script> <head> </head> <div style="text-align:center"> <ol style="float:left"> <li data-role="button">A</li> <li data-role="button">B</li> <li data-role="button">C</li> </ol> <ol style="float:left"> <li data-role="button">D</li> <li data-role="button">E</li> <li data-role="button">F</li> </ol> </div> </html> ||<

POGPIさんのコメント
cssで、divタグに「width:100%」を指定してください。

teioh12さんのコメント
回答ありがとうございます。 divにwidth指定しましたが変わりませんでした。 >|html| <html> <link rel="stylesheet" href="js/jquery.mobile-1.3.1.min.css" /> <script src="js/jquery-1.11.1.min.js"></script> <script src="js/jquery.mobile-1.3.1.min.js"></script> <head> </head> <body> <div style="text-align:center;width:100%"> <ol style="float:left;"> <li data-role="button">A</li> <li data-role="button">B</li> <li data-role="button">C</li> </ol> <ol style="float:left;"> <li data-role="button">D</li> <li data-role="button">E</li> <li data-role="button">F</li> </ol> </div> </body> </html> ||<

POGPIさんのコメント
divタグの中に、もう一つdivタグでくくって、widthを適当にpxで指定してください。

teioh12さんのコメント
こうでしょうか、結果変わりませんでした。 pogpiさんの環境では動作しているのでしょうか >|html| <html> <link rel="stylesheet" href="js/jquery.mobile-1.3.1.min.css" /> <script src="js/jquery-1.11.1.min.js"></script> <script src="js/jquery.mobile-1.3.1.min.js"></script> <head> </head> <body> <div style="text-align:center"> <div style="width:1024px"> <ul style="float:left;"> <li data-role="button" >A</li> <li data-role="button" >B</li> <li data-role="button" >C</li> </ul> <ul style="float:left;"> <li data-role="button" >D</li> <li data-role="button" >E</li> <li data-role="button" >F</li> </ul> </div> </div> </body> </html> ||<

POGPIさんのコメント
内側のDIV、UL、LIタグそれぞれに、「margin:0px;padding:0px;border:0px;」を指定し、ul,liタグに同じwidthをpxで、divのwidthに列数倍したwidthを指定してください。

teioh12さんのコメント
ご回答ありがとうございます。 確かに中央寄せではありますが、各ボタンの大きさがそれぞれの列の最大幅になってしまいます。 できれば各ボタンは100px程度にしておきたいと考えています。 またこの方法ですと不定数のボタンの数から何列になるか計算した上で widthを指定しなければなりませんが、できればそういった処理がないようにしたいです

POGPIさんのコメント
ボタンは画像ではないんですね。liタグのpaddingを指定すればで小さくできます。 列数の計算は必要ですので、仕方ないですね。

teioh12さんのコメント
pogpiさん ご回答ありがとうございます 100%ぴったりな感じではありませんが、動作できました これを元に自分でも色々試行錯誤してみたいと思います 最後までお付き合いありがとうございました
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ