时间戳

首页 > 解决方案 > 在 li/ul 表之前格式化 div b 标签

javascript - 在 li/ul 表之前格式化 div b 标签

问题描述

我正在用 JS 制作 li/lu：

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

所以我有一个CSS样式问题。我想格式化“产品目录”副标题下的 li/ul“表格”。我怎样才能实现它？

标签： javascriptcss

解决方案

您可以float:right从b和ul元素中删除：

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

推荐阅读