マジック送信ボタン！

次のコードは有効であると思わ：マジック送信ボタン！

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> 
<title>Sample Form</title> 
<style type="text/css"> 
    input {width:500px; padding:3px; background:green; border:1px solid red;} 
    textarea {width:500px; height:150px; padding:3px; background:green ; border:1px solid red;} 
</style> 
</head> 
<body> 
    <form action=""> 
    <p><input id="entry_0"><label for="entry_0">Name</label></p> 
    <p><input id="entry_1"><label for="entry_1">Email</label></p> 
    <p><input id="entry_2"><label for="entry_2">URL</label></p> 
    <p><textarea id="entry_3" rows="5" cols="5"></textarea></p> 
    <p><input type="submit" value="Submit"></p> 
    </form> 
</body> 
</html>

しかし、送信ボタンの幅が他の分野よりも短くなっています。私がDoctype宣言を削除すると、それはすべて同じ長さになります。私は間違って何をしていますか、どうすればそれらを同じサイズにすることができますか？

ありがとうございます！ Rain Lover

出典

2010-12-18 Mori

念のために、あなたのinput CSSルールに

webkit-box-sizing: content-box ; /* Safari/Chrome, other WebKit */ 
-moz-box-sizing: content-box ; /* Firefox, other Gecko */ 
box-sizing: content-box ;   /* Opera/IE 8+ */

を追加します。

注：：これはCSS3プロパティなので、非近代的なブラウザには適用されません。
参考：http://www.w3.org/TR/css3-ui/#box-sizing

出典

2010-12-18 21:13:09

パーフェクト、ありがとう！ :) – Mori

input {display:block; width:500px; padding:3px; background:green; border:1px solid red;}

これは動作するはずです。 Display:Block;を追加すると、幅と高さの属性が正しく機能します。

出典

2010-12-18 21:11:45 Brad

それはそれを試しても差はありませんでした。 – Mori

答えて

関連する問題