2011-09-17 8 views
2

問題はありませんが、驚くべきことに、送信ボタンのレイアウトの動作に気付きました。ここには2つのテストケースがあります。2つのサブミットボタンと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> 

我々は、Webブラウザ上でこれらの両方のケースを確認した場合、私が行ったという理由だけで、二つのボタンの間の間隔に差がありますコード内の次の行に移動します。私は理解していない、それは正常ですか?

通常の場合、最初のケースのようにコードを書式設定するときに、2番目のケースのようにレンダリングするにはどうすればよいですか?

答えて

1

改行はHTMLのスペースとしてレンダリングされます cssを使用してレンダリングを変更できます。たとえば、style = "float:left;"と入力します。両方ともに、または他のスパンやその他の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;" /> 
+0

あなたは、正確なデザインをしたい時に知って良いです。ありがとう! – Saneth