Question

我正在设计一个包含联系表单的联系页面。我的页面主题有一个单一的白色矩形。当我添加文本时，矩形会扩展以容纳新内容。这是可取的。（例如：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;
}

Answer 1

重新审视它以及复制，粘贴和检查方法到主题页面修复了问题。不是形式标签导致样式效果。感谢所有看过它的人。

在矩形背景内定位联系表格

1 个答案: