Welcome to Qi-U Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.5k views
in Technique[技术] by (71.8m points)

javascript - formatting div b tag before li/ul table

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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

Please log in or register to answer this question.

1 Answer

0 votes
by (71.8m points)

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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Qi-U Community for programmer and developer-Open, Learning and Share
...