javascript - 按栏Javascript/CSS整理生成的标签

我正在研究一个根据数组创建表单的小项目。代码使用数组choices []的值为数组的每个元素创建复选框。

为了使它更好，我有一个变量，它为“ columnNumber”逐行设置要扩展的元素数，另一个变量计算在生成“ ActualColumn”复选框时我要计算的列数。每当“ actualColumn”大于“ columnNumber”时，我都会通过NextLine（）函数插入一个带有document.createElement（“ br”）的对象。

但是我没有成功地将它们分隔成彼此相等的空间。
例如，如果我想逐行3个元素。我想在左侧有一个，在中间和右侧有一个。

这是一个片段，让您看看它是如何工作的。

//array of options
var choices = new Array();
choices[0] = "January";
choices[1] = "February";
choices[2] = "March";
choices[3] = "April";
choices[4] = "May";
choices[5] = "June";
choices[6] = "July";
choices[7] = "August";
choices[8] = "September";
choices[9] = "October";
choices[10] = "November";
choices[11] = "December";

//number of column
var columnNumber = 3;
var actualColumn = 0;
var cbh = document.getElementById('checkboxes');
var val = '';
var cap = "";

var j = "";
var t = document.getElementById('t');

// the loop is creating the checkboxes with name, value...
for (var i in choices) {
  //increment the actualColumn to notice that we're adding an element
  actualColumn++;

  //If the number of element become bigger that the number of columns wanted we execute NextLign() and pass actualColumn to 1.
	if (actualColumn > columnNumber) {
		NextLign();
		actualColumn = 1;
	} else {
	}

  //Name of checkboxes are their number so I convert the i into a string.
  var nouvelleLigne = document.createElement("div");
  nouvelleLigne.innerHTML = "\n";
  j = i.toString();

  val = j;
  //cap will be the value/text of choices[i]
  var cb = document.createElement('input');
  var label = document.createElement("label");

  //initializing the checkboxes
  cap = choices[i];
  var text = document.createTextNode(cap);
  cb.type = 'checkbox';
  cbh.appendChild(cb);
  cb.name = cap;
  cb.value = val;
  label.appendChild(cb);
  label.appendChild(text);
  cbh.appendChild(label);
}
//insert a <br> to pass to the next row
function NextLign(){
	var br = document.createElement("br");
	var foo = document.getElementById("checkboxes");
	foo.appendChild(br);
}

*{
  box-sizing: border-box;
}
#data {
	padding:5px;
	width:100vw;
}
.multiselect {
	overflow: visible;
	padding:0;
	padding-left:1px;
	border:none;
	width:100vw;
	white-space: normal;
	height:75px;
	text-align: center;
}
.checkboxes {
	height:100px;
	width:100px;
	border:1px solid #000;
	background-color:white;
	margin-left:-1px;
}
label {
	display: inline-flex;
	border: 1px grey solid;
	padding:5px;
}

<form>
	<div id="data">
		<div class="multiselect">
			<div id="c_b">
				<div id="checkboxes">
				</div>
			</div>
		</div>
	</div>
</form>

如果有人有答案，最好更新代码段，让我看看您是如何做到的。

非常感谢。

最佳答案

回答这一部分：


  例如，如果我想逐行3个元素。我想在左侧有一个，在中间和右侧有一个。


我从text-align: center;中删除​​了.multiselect并添加了一个选择[12] ='Jan';如果您再添加一个选项作为choice [13] ='Feb'，它将出现在中间。

//array of options
var choices = new Array();
choices[0] = "January";
choices[1] = "February";
choices[2] = "March";
choices[3] = "April";
choices[4] = "May";
choices[5] = "June";
choices[6] = "July";
choices[7] = "August";
choices[8] = "September";
choices[9] = "October";
choices[10] = "November";
choices[11] = "December";
choices[12] = "Jan";

//number of column
var columnNumber = 3;
var actualColumn = 0;
var cbh = document.getElementById('checkboxes');
var val = '';
var cap = "";

var j = "";
var t = document.getElementById('t');

// the loop is creating the checkboxes with name, value...
for (var i in choices) {
  //increment the actualColumn to notice that we're adding an element
  actualColumn++;

  //If the number of element become bigger that the number of columns wanted we execute NextLign() and pass actualColumn to 1.
	if (actualColumn > columnNumber) {
		NextLign();
		actualColumn = 1;
	} else {
	}

  //Name of checkboxes are their number so I convert the i into a string.
  var nouvelleLigne = document.createElement("div");
  nouvelleLigne.innerHTML = "\n";
  j = i.toString();

  val = j;
  //cap will be the value/text of choices[i]
  var cb = document.createElement('input');
  var label = document.createElement("label");

  //initializing the checkboxes
  cap = choices[i];
  var text = document.createTextNode(cap);
  cb.type = 'checkbox';
  cbh.appendChild(cb);
  cb.name = cap;
  cb.value = val;
  label.appendChild(cb);
  label.appendChild(text);
  cbh.appendChild(label);
}
//insert a <br> to pass to the next row
function NextLign(){
	var br = document.createElement("br");
	var foo = document.getElementById("checkboxes");
	foo.appendChild(br);
}

*{
  box-sizing: border-box;
}
#data {
	padding:5px;
	width:100vw;
}
.multiselect {
	overflow: visible;
	padding:0;
	padding-left:1px;
	border:none;
	width:100vw;
	white-space: normal;
	height:75px;
}
.checkboxes {
	height:100px;
	width:100px;
	border:1px solid #000;
	background-color:white;
	margin-left:-1px;
}
label {
	display: inline-flex;
	border: 1px grey solid;
	padding:5px;
  width: 20%;
}

<form>
	<div id="data">
		<div class="multiselect">
			<div id="c_b">
				<div id="checkboxes">
				</div>
			</div>
		</div>
	</div>
</form>