html - チェックボックスを適切に配置する方法

Question

したがって、ここにコードのスニペットがあります：http: //jsfiddle.net/q4ZNc/

そのコードスニペットを実行するために少し時間を取ってください。

私がやろうとしているのは、下の緑色のボックスです。上のボックスの境界線に揃えられるように、各チェックボックスを広げます。

だから..そのテキストを広げる必要はありません...次のようなもの：

現在のようなら

 <--------------------------Header above-------------------------------------->
   <---c1----><---c2----><----c3-----><----c4--->

上記になりたいです。

 <-------c1-------><------c2------><--------c3---------><-------c4------>[Submit]

申し訳ありませんが、間隔をめちゃくちゃにした可能性があります。しかし、基本的に等距離の間隔。

私は初心者です..そして過去1時間からこれを解決しようとしていて、ここに投稿することにしました。助言がありますか。ありがとう

score 2 · Accepted Answer

各入力の周りに追加しdiv.inputContainer、中央に揃えて、width:20%5つの入力があるように設定しました。

チェックボックスの数に基づいて動的にするには、少しスクリプトを作成する必要があります。JQueryを使用した例を次に示します。

var inputContainers = $('.inputContainer');
inputContainerLength = inputContainers.length;
inputContainers.width(100 / inputContainerLength + '%');

score 1 · Accepted Answer

入力をとして表示しtable-cell、それらすべてをとしてレンダリングされるdivでラップし、コンテナに100％の幅をtable-row配置することができます（）。display-table.checklist

これにより、ブラウザはセルを均等に分散します

2 に答える 2