0

お問い合わせフォームのあるお問い合わせページをデザインしています。私のページのテーマには、単一の白い長方形があります。テキストを追加すると、新しいコンテンツに合わせて長方形が拡張されます。これは望ましいことです。(例: http://nspowers.org/q/form/theme-example-style.html )。

ただし、お問い合わせフォーム ページでは、フォーム タグが原因で四角形要素の動作が異なり、その理由がわかりません。拡張しません。代わりに、細い線のみが表示されます: (例: http://nspowers.org/q/form/contact-form.html )

テーマの例のページのように、上下に白い余白があるように、四角形の中にフォームを配置する方法を学びたいと思います。他に提供する必要があるものがある場合はお知らせください。

該当するCSSはこちら

body {
background-color:#E7E7E7;
overflow:scroll;
}



/* Typography */

h1 {
font-size: 17px;
text-transform: uppercase;
line-height:0.9em;
    font-family: 'Courgette', cursive;
    color:#C72207;
    }


h2 { 
font-family: 'Strait', sans-serif;
font-size:12px; 
}


h3 {
font-size: 34px;
    text-transform:none;
line-height: 0.8em;
    font-family: 'Courgette', cursive;
    color:#C72207;
    margin-bottom:14px;
}


h4 {
font-size: 60px;
text-transform:none;
line-height: 0.02em;
font-family: 'Source Sans Pro', sans-serif;
color:#454545;
font-weight: normal;
margin-left:0px;
display:block;
}


h5 { 
font-size: 12px; 
color:#fe7134;
text-transform: uppercase;
}


h6 { font-size: 1px; line-height: 21px; 
}


p { margin: 0 0 14px 0; font-family: 'Arimo', sans-serif; line-height:140%; text-decoration:none;
}




#divider  {
width: auto;
height: 1px;
background: #BDC3C7;
margin-top: 10px;
}  

/* Home Page */

.block-front {
margin-left: auto;
margin-right: auto;
width: auto;
display: block;
margin-top:50px;
background-color:#FEFEFE;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #FEFEFE;

border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #FEFEFE;

-webkit-box-shadow: 0 10px /*Changes depth*/ 4px -5px rgba(0, 0, 0, 0.2), 0 0 40px rgba(0, 0, 0, 0.1) ;
-moz-box-shadow: 0 10px /*Changes depth*/ 4px -5px rgba(0, 0, 0, 0.2),  0 0 40px rgba(0, 0, 0, 0.1) ;
box-shadow: 0 10px /*Changes depth*/ 4px -5px rgba(0, 0, 0, 0.2),  0 0 40px rgba(0, 0, 0, 0.1) ;
}


.block-initial { 
display: inline-block;
*display:inline;/* For IE7*/
*zoom:1;/* For IE7*/
display:block;
margin:auto;
width:90%;
text-align:center;
}

.block_text {
margin:auto;
width:60%;

display: inline-block;
*display:inline;/* For IE7*/
*zoom:1;/* For IE7*/
display:block;
}
4

1 に答える 1