HTML автоматически меняет строку флажка

Вот так выглядит сайт.

В первой строке флажка последний флажок и его метка не связаны друг с другом, как я могу поместить флажок и его метку в одну строку.

Это css флажка

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

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

То, как я создал флажок (я сократил данные)

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

javascript html css checkbox flexbox

11.02.2023 11:06

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы должны обернуть флажок и метку в один и тот же элемент, а затем сделать эту оболочку свойством display: inline-block:

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>

11.02.2023 11:17

Ответ принят как подходящий

Вы можете решить проблему, а также упростить свой код, реструктурировав html.

Элементы метки могут содержать элемент ввода.

Итак, эта исходная разметка:

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

Может быть упрощено до:

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

И это группирует флажок и метку, делая ненужными атрибуты for и id. Затем, применяя css white-space: nowrap к меткам, проблема решена.

Фрагмент

JavaScript опущен, так как он не имеет отношения к решению.

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>

После использования кода галочки автоматически изменили строку, но позже, когда я зашел на сайт с телефона, галочки встали в строку, а не отображались так, как я вижу на компьютере. Вы знаете, как решить эту проблему?

— 13.02.2023 19:32

@henryChan - я думаю, что в вашей новой версии есть проблема с медиа-запросом. Я сообщу вам, если найду проблему.

— 13.02.2023 20:22

11.02.2023 13:53