Question

我的html页面上有一个表单，带有一个文本框和<span id="list">。在文本框中搜索任何内容时，结果将通过javacript显示在列表中。但是，空列表的默认大小仍然太小，并且在美学上没有吸引力。如何将列表框的默认高度设置为最少7行？

＆＃13;

   function promptAdd(list) {
     var text = "";
     var inputs = document.querySelectorAll("input[type=text]");
   
     for (var i = 0; i < inputs.length; i++) {
       text += inputs[i].value;
     }
   
     var lis = document.querySelectorAll('#list li');
     for (var i = 0; i < lis.length; i++) {
       if (lis[i].innerText == text ){
         resetInputs();
   
         return false;
       }
     }
   
     var li = document.createElement("li");
     var node = document.createTextNode(text);
   
     li.appendChild(node);
     document.getElementById("list").appendChild(li);
   
     resetInputs();
   }
   
   function resetInputs(){
     var inputs = document.querySelectorAll("input[type=text]");
   
     for (var i = 0; i < inputs.length; i++) {
       inputs[i].value = "";
     }
   }

＆＃13;

<div class="row">
<div class="col-lg-6 mb-1">
<div class="card h-100 text-left">
<div class="card-body">
<h4 class="card-title">Add Resources</h4>
<input type="text" class="form-control" name="employee" placeholder="Enter Name" />
<small id="message" class="form-text text-muted">Press + to add to your list</small>
<button id="bd1" class="btn add-more" onclick="promptAdd(list)" type="button">+</button>
<br></br>
<h5>List of Resources added</h5>
<div class="form-control" id="list">
   <span id="list">
</div>

＆＃13;

Answer 1

如果没有任何物品，我认为以下答案不会起作用。但答案是正确的。为您的跨度添加以下css：

display:block;
min-height:30px;

或者您可以使用以下方法设置跨度超出范围：

min-height:30px;

如何在html中增加空列表的高度

1 个答案: