htmlの空リストの高さを増やす方法

Question

私のHTMLページには、テキストボックスと<span id="list">のフォームがあります。テキストボックスで何かが検索されると、結果はjavacriptを介してリストに表示されます。しかし、空のリストのデフォルトサイズは小さすぎるままであり、審美的にアピールしません。リストボックスのデフォルトの高さを最低7行に設定するにはどうすればよいですか？

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

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

Answer 1

私は、すべてのアイテムが存在しない場合は、以下の回答がうまくいくとは思いません。しかし答えは正しかったです。

display:block; 
min-height:30px; 

またはあなただけでスパン上記のdivを設定することができます：

min-height:30px; 

あなたのスパンについて次のCSSを追加