HTML change the line of the checkbox automatically

Question

This is how the website look.

In the first line of the checkbox, the last checkbox and its label isn't connected together, how am I going to put the checkbox and its label in the same line.

This is the css of the checkbox

.checkboxContainer {
    display: inline-block;
    padding-top: 80px;
    padding-left: 40px;
    padding-right: 30px;
    padding-inline: 50px;
}

.checkboxContainer label {
    font-size: 25px;
    padding-right: 10px;
}

The way I created the checkbox (I have shortened the data)

const checkboxContainer=document.querySelector(".checkboxContainer");

let nutritions=[{"id":1,"label":"食品分類"},...];
for (let tmp of nutritions) {
    const checkboxId="checkbox"+tmp.id;
    const checkbox='<input type="checkbox" id="'+checkboxId+'" class="checkbox-input">';
    const label='<label for"'+checkboxId+'">'+tmp.label+'</label>';
    checkboxContainer.innerHTML+=checkbox+label;
}

Answer 1

You can solve the problem and also simplify your code by restructuring the html.

Label elements may contain an input element.

So this original markup:

<input type="checkbox" id="checkbox-1">
<label for="checkbox-1"> Text</label>

May be simplifed to:

<label><input type="checkbox">Text</label>

And this groups the checkbox and label, making the for and id attributes unnecessary. Then by applying css white-space: nowrap to the labels the problem is solved.

Snippet

The JavaScript is omitted since it's irrelevant to the solution.

body {
  font-family: sans-serif;
}
h5 {
  margin-bottom: 0;
  color: blue;
}

.checkboxContainer {
  width: 16rem;
  border-right: 2px dotted red;
  overflow: hidden;
}

.checkboxContainer label {
  white-space: nowrap;
  margin-right: 1rem;
}

<h5>Modified</h5>
<div class="checkboxContainer">
  <label>
    <input type="checkbox">1-label
  </label>
  <label>
  <input type="checkbox">2-label
  </label>
  <label>
    <input type="checkbox">3-label
  </label>
  <label>
  <input type="checkbox">4-label
  </label>
  <label>
    <input type="checkbox">5-label
  </label>
  <label>
    <input type="checkbox">6-VeryLongLabelNameToTestHowItWrapsText
  </label>
  <label>
    <input type="checkbox">7-label
  </label>
  <label>
    <input type="checkbox">8-label
  </label>
  <label>
    <input type="checkbox">9-label
  </label>
  <label>
    <input type="checkbox">10-label
  </label>
</div>

<h5>Original</h5>
<div class="checkboxContainer">
  <input type="checkbox" id="c1">
  <label for="c1">1-label</label>
  <input type="checkbox" id="c2">
  <label for="c2">2-label</label>
  <input type="checkbox" id="c3">
  <label for="c3">3-label</label>
  <input type="checkbox" id="c4">
  <label for="c4">4-label</label>
  <input type="checkbox" id="c5">
  <label for="c5">5-label</label>
  <input type="checkbox" id="c6">
  <label for="c6">6-VeryLongLabelNameToTestHowItWrapsText</label>
  <input type="checkbox" id="c7">
  <label for="c7">7-label</label>
  <input type="checkbox" id="c8">
  <label for="c8">8-label</label>
  <input type="checkbox" id="c9">
  <label for="c9">9-label</label>
  <input type="checkbox" id="c10">
  <label for="c10">10-label</label>
</div>

Answer 2

You should wrap the checkbox and the label to the same element, then make that wrapper have display: inline-block property:

const checkboxContainer = document.querySelector(".checkboxContainer");

let nutritions = [{
  "id": 1,
  "label": "食品分類"
}, {
  "id": 1,
  "label": "食品分類類分"
}, {
  "id": 1,
  "label": "食品分類分"
}, {
  "id": 1,
  "label": "食品分類分"
}, {
  "id": 1,
  "label": "食品分類品品類"
}, {
  "id": 1,
  "label": "食品"
}, {
  "id": 1,
  "label": "食品分類食分"
}, {
  "id": 1,
  "label": "食品分類"
}, {
  "id": 1,
  "label": "食類分類"
}, {
  "id": 1,
  "label": "食品分類類類類類分"
}, {
  "id": 1,
  "label": "食品分類"
}, {
  "id": 1,
  "label": "食品分類"
}, {
  "id": 1,
  "label": "食品分類"
}, {
  "id": 1,
  "label": "食品分類"
}, {
  "id": 1,
  "label": "食品分類"
}, {
  "id": 1,
  "label": "食品分類"
}, {
  "id": 1,
  "label": "食品分類"
}, {
  "id": 1,
  "label": "食品分類"
}, {
  "id": 1,
  "label": "食品分類"
}, {
  "id": 1,
  "label": "食品分類"
}, {
  "id": 1,
  "label": "食品分類"
}, {
  "id": 1,
  "label": "食品分類"
}, {
  "id": 1,
  "label": "食品分類"
}, {
  "id": 1,
  "label": "食品分類"
}, {
  "id": 1,
  "label": "食品分類"
}, ];
for (let tmp of nutritions) {
  const checkboxId = "checkbox" + tmp.id;
  const checkbox = '<input type="checkbox" id="' + checkboxId + '" class="checkbox-input">';
  const label = '<label for"' + checkboxId + '">' + tmp.label + '</label>';
  checkboxContainer.innerHTML += `<div>${checkbox + label}</div>`;
}

.checkboxContainer {
  display: block;
  padding-top: 80px;
  padding-left: 40px;
  padding-right: 30px;
  padding-inline: 50px;
  text-align: center;
}

.checkboxContainer div {
  display: inline-block;
  padding-right: 10px;
}

.checkboxContainer label {
  font-size: 25px;
}

<div class="checkboxContainer">
</div>