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;
}