开发者

Two submit buttons and two code formatting cause browser rendering difference

开发者 https://www.devze.com 2023-04-06 03:10 出处:网络
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.

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 differenc开发者_C百科e 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 ?


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;" />
0

精彩评论

暂无评论...
验证码 换一张
取 消