两个提交按钮和两种代码格式导致浏览器渲染差异

发布于 2024-12-05 09:44:23 字数 1040 浏览 0 评论 0原文

并不是真正的问题,但我注意到提交按钮布局中的一个行为让我感到惊讶。这是 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>

如果我们在网络浏览器上检查这两种情况,两个按钮之间的间距存在差异,仅仅是因为我转到了代码中的下一行。我不明白,这正常吗?

如果正常,我该如何像第二种情况一样渲染,同时像第一种情况一样格式化我的代码?

Not really a problem, but I have noticed a behavior in the layout of submit buttons that I find surprising. Here are the 2 test cases.

Number 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>

Number 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>

If we check these both cases on web browsers, there is a difference in the spacing between the two buttons, simply because I went to next line in the code. I do not understand, is it normal ?

If it is normal, how could I do to render like the second case while formatting my code like the first case ?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

反话 2024-12-12 09:44:23

换行符在 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;" />

line break is rendered as a space in HTML
you can alter the rendering using css. an example would be to put a style="float: left;" on both, or wrap them in another span or some other html element.

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

or

<input type="submit" value="Left" name="left" style="float: left;" />
<input type="submit" value="Right" name="Right" style="float: left;" />
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文