2

フォーム (青いボックス) を含む div があります。すべてのブラウザで、その div を画面の中央に配置する必要があります。これについて調べたところ、余白を入れればうまくautoいくはずだと言われました。

しかし、いいえ、これは私のボックス（div）をすべてのブラウザの左側に置きます。

<HTML>
..
...
<body>

<div id="questionare">

<form .....
....
....
</form>
         </div>

</body>

...
....

</HTML>

私のCSSでは、次のようなことを試しました：

#questionare{

 margin: 0 auto ;
 position:relative;
 width: 300px; 
 text-align: left;
 background:rgb(127, 177, 198);
 padding: 88px 79px 29px; 
 border-radius: 10px;
 box-shadow: 0px 5px 12px rgba(0,0,0,0.4); 
-webkit-border-radius: 10px; 
-moz-border-radius: 10px; -khtml-border-radius: 10px; 
-webkit-box-shadow: 0 5px 12px rgba(0, 0, 0, .4); 
-moz-box-shadow: 0 5px 12px rgba(0, 0, 0, .4); 
-khtml-box-shadow: 0 5px 12px rgba(0, 0, 0, .4);
 behavior: url(/PIE.htc);
}

-また-

#questionare{
 margin-left: auto ;
 margin-right: auto ;
 position:relative;
width: 300px;

text-align: left;
background:rgb(127, 177, 198);
padding: 88px 79px 29px; 
border-radius: 10px;
box-shadow: 0px 5px 12px rgba(0,0,0,0.4); 
-webkit-border-radius: 10px; 
-moz-border-radius: 10px; -khtml-border-radius: 10px; 
-webkit-box-shadow: 0 5px 12px rgba(0, 0, 0, .4); 
-moz-box-shadow: 0 5px 12px rgba(0, 0, 0, .4); 
-khtml-box-shadow: 0 5px 12px rgba(0, 0, 0, .4);

behavior: url(/PIE.htc);


}

フォーム スタイルが空です

form{

}

解決策は何ですか？

4

5 に答える 5

1

jsFiddleを参照してください。

私はあなたのコードを何も変更していません。

あなたの問題はdoctype、ブラウザが quirks モードでレンダリングすることを余儀なくされていることが原因である可能性があります。

于 2012-11-29T14:45:49.400 に答える
1

のようなDTDを使用してみてください

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
于 2012-11-29T14:42:34.287 に答える
0

ほとんどの場合、集中化された div を使用してコンテンツのスタイルを設定する代わりに、これを使用することをお勧めします。

#questionaire{
position:realative;
margin:auto;
width:300px;
}
#questionaire_innner_div{
position:relative;
float:left;
padding: 88px 79px 29px; 
width:242px;
}

次に、htmlは次のようになります。

<div id="questionaire">
<div id="questionaire_innner_div">

<form>
...
...
...
</form>

</div>
</div>
于 2012-11-29T14:51:11.333 に答える
0

タグのレイアウトを修正すると、レイアウトが正常に機能します。たとえば、そう</div>ではありません。< /div>

ここで動作することを確認してください：http://jsfiddle.net/XscZK/

于 2012-11-29T14:51:15.780 に答える
0

Doctype を他の回答で提案されているように使用することに加えて、次の css ルールが必要です。

body{text-align: center;}
.wrapper{
text-align: left;
margin: 0 auto;
width: 100px; /* or your desired size, or no size if you want the div to be 100% */
height: 100px; /* or your desired size, or no size if you want the div to be 100% */
}

body text-align を中央に設定して、すべてのブラウザで機能するようにすることが重要です

于 2012-11-29T14:50:09.087 に答える