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

Question

teioh12

7

0もっと見る

ウェブ制作

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

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

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

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

回答の条件

1人5回まで

登録：2014/07/03 13:48:25
終了：2014/07/09 10:04:16

コメントはまだありません

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

リクエスト送信済

回答リクエストを送信したユーザーはいません

POGPI · Accepted Answer · 2014-07-03T14:18:47+09:00

No.1

POGPI428592014/07/03 14:18:47

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

他9件のコメントを見る

pogpiさん
回答ありがとうございます

回答を元に組んでみたのですが、ABCの下にDEFが出てきてしまい
ABCの横には配置できませんでした。

positionで指定するにしても結果同じになってしまいました

2014/07/04 16:44:40

cssで、olタグにfloat:leftを指定してください。

2014/07/04 18:16:56

回答ありがとうございます。
下記のように組んだのですがやはり中央寄せにはなりませんでした
data-role="button"を外しても結果は同じです

<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>

2014/07/07 08:51:28

cssで、divタグに「width:100%」を指定してください。

2014/07/08 06:02:06

回答ありがとうございます。
divにwidth指定しましたが変わりませんでした。

<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>

2014/07/08 08:10:09

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

2014/07/08 12:31:03

こうでしょうか、結果変わりませんでした。
pogpiさんの環境では動作しているのでしょうか

<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>

2014/07/08 15:03:03

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

2014/07/08 15:47:02

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

2014/07/08 16:38:11

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

2014/07/08 16:58:33

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

2014/07/09 10:03:57

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

ベストアンサー

POGPI428592014/07/03 14:18:47

コメント（0件)

この質問への反応（ブックマークコメント）