时间戳

首页 > 解决方案 > 如何显示动态生成在同一行连续？我需要在一行 3 列中动态显示成分列表，但我遇到的问题是我的输出没有在一行上对齐。任何人都可以提供解决方案，它可能看起来有点复杂，但我已经绝望了。函数 display(){ var lght = jsn[0].ingredient.length; var old_val = new Array(lght); 变量 ell = ""; var ul = document.getElementById("comp_tag"); for(let a=0; a <

问题描述

标签： javascriptcssbootstrap-4

解决方案

如您所见，如果没有 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>

推荐阅读