Question

不是真的有问题，但我注意到提交按钮布局中的行为让我感到惊讶。以下是2个测试用例。

第1名：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
</head>
<body>

<form method="post" action="move.php" style="text-align: center;">
<input type="submit" value="Left" name="left"/>
<input type="submit" value="Right" name="right"/>
</form>

</body>
</html>

2号：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
</head>
<body>

<form method="post" action="move.php" style="text-align: center;">
<input type="submit" value="Left" name="left"/><input type="submit" value="Right" name="Right"/>
</form>

</body>
</html>

如果我们在网络浏览器上检查这两种情况，那么两个按钮之间的间距就会有所不同，这只是因为我在代码中转到了下一行。我不明白，这是正常的吗？

如果是正常的话，在第一种情况下格式化我的代码时，如何像第二种情况那样渲染？

Answer 1

换行符在HTML中呈现为空格你可以使用css改变渲染。一个例子是放一个style =“float：left;”在两者上，或将它们包装在另一个span或其他一些html元素中。

<span style="float: left;"><input type="submit" value="Left" name="left" /></span>
<span style="float: left;"><input type="submit" value="Right" name="Right" /></span>

或

<input type="submit" value="Left" name="left" style="float: left;" />
<input type="submit" value="Right" name="Right" style="float: left;" />

两个提交按钮和两个代码格式导致浏览器呈现差异

1 个答案: