2

下面的代码按我的预期工作。每样东西都是完美的造型。

<style>
   .letter-spacing{
      width: 400px;
      background: red;
      text-align: center;
      letter-spacing: 20px;
    }
</style>

<div class="letter-spacing">
   <img src="icon1.png">
   <img src="icon2.png">
</div>

结果与字母间距

但是,如果我使用 document.write 渲染“div”,“letter-spacing: 20px;” 不起作用。有趣的是红色背景和中心对齐仍然有效。

<style>
   .letter-spacing{
      width: 400px;
      background: red;
      text-align: center;
      letter-spacing: 20px;
    }
</style>

<script>
    document.write('<div class="letter-spacing">'+
                       '<img src="icon1.png">'+
                       '<img src="icon2.png">'+
                   '</div>');
</script>

在此处输入图像描述

有没有人知道为什么?

4

2 回答 2

3

因为你是这样写的

document.write('<div class="letter-spacing">'+
                   '<img src="icon1.png">'+
                   '<img src="icon2.png">'+
               '</div>');

这将导致HTML

<div class="letter-spacing"><img src="icon1.png"><img src="icon2.png"></div>

它不包含任何空间,因此letter-spacing: 20px;无法正常工作。

与你直接写的那个不同,HTMLnew line被认为是一个空格。

如果您想获得相同的结果,请将其更改为

document.write('<div class="letter-spacing">'+
                   '<img src="icon1.png"> '+    // Note the space before '
                   '<img src="icon2.png">'+
               '</div>');
于 2015-03-05T04:50:59.977 回答
0

这很奇怪,但我可以像这样用一些困难的方式修复它

document.write('<div class="letter-spacing"> '+
               '<img style="margin-right: 20px;" src="icon1">'+
                   '<img src="icon2">'+
               '</div>');

但是,如果我在 css 中设置一个类,它就不起作用。这真的很奇怪

于 2015-03-05T04:48:53.487 回答