HTML不正確顯示，除非格式化

我有一個生成下面的代碼的程序：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>

來源

2014-11-21 Nate Pet

Works [here JSFIDDLE]（http://jsfiddle.net/bsxkpwLr/），在其他代碼中必須是其他原因 – Billy 2014-11-21 17:59:58

@Billy我相信他的意思是格式化的，它排成行，但沒有格式化，它安排他們在列。 – Compass 2014-11-21 18:01:44

你用什麼來生成代碼？也許你需要在被填充的字符串中包含一個回車符和/或換行符。 – 2014-11-21 18:03:32

這是同樣的原因，它們是不同的：

（不同線路:)

<!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引起），因此您可以看到所有內容一行，但下一行將在下一行開始。

來源

2014-11-21 18:13:40

HTML不正確顯示，除非格式化

回答

相關問題