如何使折叠卡片中的列表水平显示

Question

当用户单击按钮时，我会动态填充项目列表。我不能使它水平显示，即使我使用列表-组-水平。

HTML代码

  <div id="textarea_display" class="mt-2 ">

    <label>Output:</label>
    <div id="box" classword="row">
      <!-- <a href=">• Paragraph One Here.</p><p><a href="URL path to external link" title="Mouseover Description">Link Text Description</a></p> -->
      <p id="para">

      </p>

      <!-- definition and other tagged terns -->
      <div class="collapse" id="collapseExample">
        <div class="card card-body">
          <ul class="list-group list-group-horizontal" id="termList">
            <!-- dynamic li items created in JS -->
          </ul>
        </div>
      </div>

    </div>
  </div>

JS代码

// highlight using mark js in javacript
    var context = document.querySelector("#para");
    var instance = new Mark(context);
    // instance.mark(data);
    instance.mark(dict_keys);

    var paragraph = document.getElementById("para")

    console.log(definition)

    // $('mark').wrapAll('<div class="dropdown show"><a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown link</a><div class="dropdown-menu" aria-labelledby="dropdownMenuLink"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">Another action</a><a class="dropdown-item" href="#">Something else here</a></div></div>');
    // $('mark').wrapAll('<a href="#"></a>');

    // $('mark').wrapAll('<button class="btn btn-danger btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-toggle-second="tooltip" data-placement="top" title="Common misspelling"></button>')
    $('mark').wrapAll('<button class="btn btn-danger btn-sm" type="button" id="collapseButton" data-toggle="collapse" aria-expanded="false" data-toggle-second="tooltip" data-placement="top" title="Common misspelling" aria-controls="collapseExample" data-target="#collapseExample"></button>')

    var button = document.getElementById("collapseButton");
    var ul = document.querySelector("#termList");

    // show the list of suggested terms as corrections for common misspelling when the button is clicked
    button.addEventListener("click", function() {
      var arrayLength = dict_values.length;
      for (var i = 0; i < arrayLength; i++) {
          console.log(dict_values[i]);
          //Do something
          var li = document.createElement("li");
          li.className = "list-group-item ";
          li.appendChild(document.createTextNode(dict_values[i]));
          ul.appendChild(li);
      }

    })

对于id = box的div，我使用自己的样式。卡片将在此框中，项目列表将在卡片中垂直显示。任何帮助都是非常感谢的。

Answer 1

这将会起作用。

li {
  float: left;
}