数が決まっていないﾎﾞﾀﾝの中央寄せお世話になります｡Javascriptにて数の決まっていないﾎﾞﾀﾝをまずは縦に配置しそこ数が一定以上になると新しい列とする､といった形…

人力検索はてな

ﾓﾊﾞｲﾙ版を表示しています｡PC版はこちら

数が決まっていないﾎﾞﾀﾝの中央寄せ

お世話になります｡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%ぴったりな感じではありませんが､動作できましたこれを元に自分でも色々試行錯誤してみたいと思います最後までお付き合いありがとうございました