HTML格式不正确,除非格式化

时间:2014-11-21 17:55:49

标签: html

我有一个生成以下代码的程序:

    <div style='width:10%'><hr></div><div style='width:10%'><span style='white-space: nowrap;'>First1 Last1</span><span style=' margin-left:20px;'></span><span style='white-space: nowrap;'>First2 Last2</span><span style=' margin-left:20px;'></span><span style='white-space: nowrap;'>First3 Last3</span><span style=' margin-left:20px;'></span><span style='white-space: nowrap;'>First4 Last4</span><span style=' margin-left:20px;'></span><span style='white-space: nowrap;'>First5 Last5</span><span style=' margin-left:20px;'></span><span style='white-space: nowrap;'>First6 Last6</span><span style=' margin-left:20px;'></span><span style='white-space: nowrap;'>First7 Last7</span><span style=' margin-left:20px;'></span><span style='white-space: nowrap;'>First8 Last8</span><span style=' margin-left:20px;'></span></div>

如果我把它放进去就不能正常显示。

如果我手动格式化代码,它会正确显示。这是为什么。

     <div style='width:10%'><hr></div>
     <div style='width:10%'>
       <span style='white-space: nowrap;'>First1 Last1</span><span style=' margin-left:20px;'></span>
       <span style='white-space: nowrap;'>First2 Last2</span><span style=' margin-left:20px;'></span>
       <span style='white-space: nowrap;'>First3 Last3</span><span style=' margin-left:20px;'></span>
       <span style='white-space: nowrap;'>First4 Last4</span><span style=' margin-left:20px;'></span>
       <span style='white-space: nowrap;'>First5 Last5</span><span style=' margin-left:20px;'></span>
       <span style='white-space: nowrap;'>First6 Last6</span><span style=' margin-left:20px;'></span>
       <span style='white-space: nowrap;'>First7 Last7</span><span style=' margin-left:20px;'></span>
       <span style='white-space: nowrap;'>First8 Last8</span><span style=' margin-left:20px;'></span>
     </div>

1 个答案:

答案 0 :(得分:1)

这与以下不同的原因相同:

(不同的行:)

<!DOCTYPE html>

<html>
<body>
<div style='width:1%'>
<span style='white-space:nowrap;'>TTTTTTTT</span>
<span style='white-space:nowrap;'>A</span>
</div>
</body>
</html>

和(同一行:)     

<html>
<body>
<div style='width:1%'>
<span style='white-space:nowrap;'>TTTTTTTT</span><span style='white-space:nowrap;'>A</span>
</div>
</body>
</html>

第一个跨度是使用超过分配的宽度,但它不会包装文本(由nowrap引起),所以你在一行上看到它,但是下一个跨度将从下一行开始。