我家空空 2021-12-02 09:58 采纳率: 50%
浏览 60
已结题

CSS样式为什么不能完全应用到新添加的DOM元素上?

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            list-style: none;
        }
        ul li{
            display: inline-block;
            min-height: 28px;
            min-width: 36px;
            text-align: center;
            line-height: 28px;
            border: 1px solid#ebebeb;
            cursor: pointer;
            color: #666f79;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
    <script>
        const ul = document.getElementsByTagName('ul')[0]
        for(let i=0; i<3; i++){
            const li = document.createElement('li')
            li.innerHTML = 9 + i
            ul.appendChild(li)
        }
    </script>
</body>
</html>

img

上图最后三个是新添加的li元素,为什么跟前面的li元素样式不太一样呢?

  • 写回答

3条回答 默认 最新

  • 雾里桃花 2021-12-02 10:23
    关注

    主要原因是因为,你的每个li标签都是换行展示的,浏览器在解析html时,会将这两个li标签之间的换行符转换成一个空格的距离。
    而js动态追加的li标签则是没有换行的,所以它在浏览器显示的时候是没有间隙的
    最稳妥的解决方法是:
    给ul标签设置 display: flex;
    给li标签设置:margin-right: 5px;
    display: block;

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 12月10日
  • 已采纳回答 12月2日
  • 创建了问题 12月2日

悬赏问题

  • ¥15 matlab数字图像处理频率域滤波
  • ¥15 在abaqus做了二维正交切削模型,给刀具添加了超声振动条件后输出切削力为什么比普通切削增大这么多
  • ¥15 ELGamal和paillier计算效率谁快?
  • ¥15 file converter 转换格式失败 报错 Error marking filters as finished,如何解决?
  • ¥15 ubuntu系统下挂载磁盘上执行./提示权限不够
  • ¥15 Arcgis相交分析无法绘制一个或多个图形
  • ¥15 关于#r语言#的问题:差异分析前数据准备,报错Error in data[, sampleName1] : subscript out of bounds请问怎么解决呀以下是全部代码:
  • ¥15 seatunnel-web使用SQL组件时候后台报错,无法找到表格
  • ¥15 fpga自动售货机数码管(相关搜索:数字时钟)
  • ¥15 用前端向数据库插入数据,通过debug发现数据能走到后端,但是放行之后就会提示错误