Как отобразить динамически сгенерированный <select> в строке на той же строке?

Мне нужно динамически отображать список ингредиентов в строке из 3 столбцов, но у меня проблема, что мой вывод не выровнен по строке. Может ли кто-нибудь помочь с решением, это может показаться немного сложным, но я уже в отчаянии.

function display(){
var lght = jsn[0].ingredient.length; 
var old_val = new Array(lght);
var ell =  "";
var ul = document.getElementById("comp_tag");
for(let a=0; a < lght; a++){
    var li = document.createElement('li');
    var divr = document.createElement('div');
    li.setAttribute("id","lineid_"+a);
    divr.setAttribute("class","row align-middle");
    ul.appendChild(li);
    li.appendChild(divr);
    var col_one = document.createElement('div');
    col_one.setAttribute("class","col-6 text-left");
    col_one.setAttribute("id","col1"+a);
    divr.appendChild(col_one);
    col_one.appendChild(document.createTextNode("value 1"));
    var col_two = document.createElement('div');
    col_two.setAttribute("class","col-3 text-right");
    col_two.setAttribute("id","col2"+a);
    divr.appendChild(col_two);
    col_two.appendChild(document.createTextNode("value 2"));
    var col_three = document.createElement('div');
    col_three.setAttribute("class","col-3 text-left");
    col_three.setAttribute("id","col3"+a);
    divr.appendChild(col_three);
    var pb = init_workspace(jsn[0].ingredient[a].type);
    var sel = document.createElement("select");
    sel.setAttribute("class","custom-select");
    sel.setAttribute("id","c_select"+a);
    col_three.appendChild(sel);
    for(var t=0; t<pb.length; t++){
        var optn = document.createElement("option");
        if (jsn[0].ingredient[a].unit == pb[t].name){
            optn.setAttribute("selected","")
        };
        optn.setAttribute("value",pb[t].name);
        sel.appendChild(optn);
        optn.appendChild(document.createTextNode(pb[t].name));
    }

И моя часть HTML:

<div class = "col-md text-right" id = "divid">
        <p class = "text-uppercase"><b>ingredients</b></p>
        <ul id = "comp_tag">
        </ul>
</div>

Если вы хотите, чтобы созданные теги <li> были встроенными, пытались ли вы сделать свой тег UL гибким контейнером display: flex;?

— 10.12.2020 18:56

Можете ли вы привести пример объекта jsn? И обновите javascript, чтобы он работал, в нем отсутствуют некоторые }.

— 10.12.2020 19:06

Без объекта jsn и его структуры сложно воссоздать ваш дисплей. Также кажется, что вы оставили две закрывающие скобки в своей функции.

— 10.12.2020 19:19

Да, это точно моя вина. Я думал, что включение этого просто сделает код ужасно нечитаемым, мне нужно быть намного внимательнее к коду, который я публикую. Но совет пригодился, добавив display: flex; исправил мою проблему. Большое спасибо.

— 12.12.2020 03:22

javascript css bootstrap-4

10.12.2020 18:33

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

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

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

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

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

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

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

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

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

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

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

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

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

Ответы 1

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

Без объекта jsn для воссоздания этого примера, как вы его видите, я привожу статический пример ниже...

Сделайте родительский элемент элементов списка гибким контейнером. Это поместит элементы уровня блока в ряд. Чтобы проиллюстрировать это, я поместил статические элементы списка в UL и нацелил их с помощью CSS display: flex;.

#divid #comp_tag {
  display: flex;
}

Ниже приведен очень простой фрагмент, который воссоздает объект и размещает элементы объектов в строке, используя display:flex на родительском элементе UL.

Надеюсь это поможет...

let obj = {
  0: {
    'name': 'Cajun Delight',
    'ingredients': {
      'type': {
        'salt': '1 teaspoon',
        'garlic': '2 cloves',
        'pepper': '1 pinch'
      }
    }
  },
  1: {
    'name': 'Midwest Bland',
    'ingredients': {
      'type': {
        'salt': '1 teaspoon',
        'garlic': '2 cloves',
        'pepper': '1 pinch'
      }
    }
  },
  2: {
    'name': 'Asian Stir Fry',
    'ingredients': {
      'type': {
        'salt': '1 teaspoon',
        'garlic': '3 cloves',
        'pepper': '1 pinch',
        'soy_sauce': '1/4 cup'
      }
    }
  }
}


function displayInfo() {
  let compTag = document.getElementById("comp_tag");
  for (let values in obj) {
    let li = document.createElement("LI");
    li.textContent = obj[values].name;
    compTag.append(li);
    compTag.style.justifyContent = "space-around";

    if (obj[values].ingredients.type) {
      for (let type in obj[values].ingredients.type) {
        let subUl = document.createElement("UL");
        let subLi = document.createElement("LI");
        li.append(subUl);
        subUl.append(subLi);
        subLi.textContent = `${obj[values].ingredients.type[type]}`;        
      }

    }

  }
}

displayInfo();

#divid #comp_tag {
  display: flex;
  list-style-type: none;
}

<div class = "col-md text-right" id = "divid">
        <p class = "text-uppercase"><b>ingredients</b></p>
        <ul id = "comp_tag">
        </ul>
</div>

Большое спасибо. Добавление атрибута flex решило проблему! Извините, что не прикрепил объект jsn.

— 12.12.2020 03:26

10.12.2020 19:08