javascript - formatting div b tag before li/ul table

Question

I'm making li/lu with JS:

(function(){
    var ul = document.createElement('ul');
    ul.setAttribute('id','proList');

    var t, tt;
    productList=["product1", "product2", "product3", "product4"]; 
    

    document.getElementById('renderList').appendChild(ul);
    productList.forEach(renderProductList);

    function renderProductList(element, index, arr) {
        var li = document.createElement('li');
        li.setAttribute('class','item');
        
        ul.appendChild(li);
        
        t = document.createTextNode(element);
        
        li.innerHTML=li.innerHTML + element;
    }
})();

ul#proList{float:right;margin-top: 50px; }
li.item{list-style:none; padding:5px; border-radius: 1px;
    border: 1px solid #005eff;}
    

<div id="renderList" style="float:right;"><b style="float:right;">Product catalog:</b></div>

Answer 1

You can remove float:right from b and ul element:

(function(){
    var ul = document.createElement('ul');
    ul.setAttribute('id','proList');

    var t, tt;
    productList=["product1", "product2", "product3", "product4"]; 
    

    document.getElementById('renderList').appendChild(ul);
    productList.forEach(renderProductList);

    function renderProductList(element, index, arr) {
        var li = document.createElement('li');
        li.setAttribute('class','item');
        
        ul.appendChild(li);
        
        t = document.createTextNode(element);
        
        li.innerHTML=li.innerHTML + element;
    }
})();

ul#proList{
  margin-top: 50px; 
}
li.item{
  list-style:none; 
  padding:5px; 
  border-radius: 1px;
  border: 1px solid #005eff;
}

<div id="renderList" style="float:right;">
  <b>Product catalog:</b>
</div>