JS动态添加<li>至<ul>时元素向左偏移问题咨询

这个偏移问题的核心是静态HTML元素与动态添加元素之间的空白字符差异：

• 静态写在HTML里的<li>标签，因为代码中的换行、空格，元素之间会产生空白字符，浏览器会将这些空白渲染为inline-block元素之间的间距。
• 而通过JavaScript动态创建并append的<li>，是直接连续添加到父元素中的，元素之间没有任何空白字符，所以inline-block元素之间的默认间距消失了。

加上你给<li>设置的是13.6%的宽度，当每行排列多个元素时：

• 静态元素因为有额外的空白间距，每行总宽度（元素宽度+空白间距）刚好适配容器宽度，排列整齐。
• 动态元素没有空白间距，每行总宽度会比静态布局的总宽度小，剩余的容器空间会让元素排列产生视觉上的偏移感，同时元素间的水平间距明显缩小，看起来像是逐渐向左偏移。

另外，vertical-align: top仅影响垂直方向对齐，无法解决水平方向因空白字符导致的布局差异问题。

内容的提问来源于stack exchange，提问作者perfect05