猿问

Html 基础知识 - 在同一行与不同行中编写的控件

为什么这两段代码的渲染方式不同？

<button>text1</button>
<button>text2</button>

与

<button>text1</button><button>text2</button>

编辑澄清：

我们可以在这个 Fiddle中看到：

  • 在不同的行中写入控件会在它们之间添加空白（控制台检查无法到达该空白，但可以清楚地看到）

  • 在同一行中写入控件则不会。


慕哥9229398
浏览 113回答 2
2回答

吃鸡游戏

这是因为浏览器除了特殊情况（例如标签）之外没有换行符或制表符的概念，<pre>因此无论何时找到它们，它都会将它们转换为空格。请记住，它将忽略除第一个之外的所有空格、换行符和制表符。您的代码中可以有 30 个连续换行符和 100 个空格，但在浏览器中它将呈现为 1 个空格。即使只有换行符但没有空格或缩进的代码在渲染时仍会显示空格。示例：带有换行符但没有空格的代码：    <button>text1</button>     <button>text2</button>由于换行，它仍然会在它们之间呈现 1 个空白字符。您可以在小提琴中验证这一点。通常，像这样的任何类型的格式都是由 CSS 处理的。
0

catspeake

HTML 中的“EOL”你必须告诉它，尝试放在<br>按钮之间。<html>&nbsp; <head>&nbsp; &nbsp; <title>Page Title</title>&nbsp; </head>&nbsp; <body>&nbsp; &nbsp; <h1>Case 1</h1>&nbsp; &nbsp; <button>text1</button>&nbsp; &nbsp; <br>&nbsp; &nbsp; <button>text2</button>&nbsp; &nbsp; <h1>Case 2</h1>&nbsp; &nbsp; <button>text1</button>&nbsp; &nbsp; <br>&nbsp; &nbsp; <button>text2</button>&nbsp; </body></html>
0
随时随地看视频慕课网APP

相关分类

Html5
我要回答