웹 양식의 간격

Question

HTML/CSS를 사용하여 양식을 정리하고 줄이는 데 약간의 문제가 있습니다.

아래에 jsfiddle을 게시했습니다.

이메일 제출 양식의 테두리와 함께 제출 버튼을 정렬하려고합니다.

감사합니다.

http://bit.ly/1embiFX

HTML

<form target="_blank" class="validate" name="mc-embedded-subscribe-form" id="mc-embedded-subscribe-form" method="post" action="#"> 
<input type="email" value="yourname@beerisawesome.com" onblur="if (this.value == '') {this.value = 'yourname@beerisawesome.com';}" onfocus="if (this.value == 'yourname@beerisawesome.com') {this.value = '';}" id="mce-EMAIL" class="required email" name="EMAIL"> 
<input type="submit" onclick="_gaq.push(['_trackEvent', 'Sign Up', 'Click', 'Mailing List Address Entered']);" id="mc-embedded-subscribe" name="subscribe" value="JOIN" class="submit button"> 
</form> 

CSS 간단하게 높이를 변경하고 INPU에 대한 수직 정렬을 추가

form { 
    margin: 0; 
    font-family: 'Merriweather', serif; 
    height: 75px; 

} 
input.email { 
    width: 60%; 
    height: 75px; 
    font-family: 'Merriweather', serif; 
    padding-left: 30px; 
    font-size: 18px; 
    color: #c89808; 
    border: 2px solid #000000; 
    -webkit-border-top-left-radius: 10px; 
    -webkit-border-bottom-left-radius: 10px; 
    -moz-border-radius-topleft: 10px; 
    -moz-border-radius-bottomleft: 10px; 
    border-top-left-radius: 10px; 
    border-bottom-left-radius: 10px; 
    background-color: transparent; 

} 

input.email:focus { 
    outline: none; 
} 

input.submit { 
    width: 20%; 
    margin-left: -5px; 
    margin-top: 50px; 
    font-family: league; 
    font-size: 30px; 
    color: #efbe2a; 
    height: 75px; 
    background: #000000; 
    -webkit-border-top-right-radius: 10px; 
    -webkit-border-bottom-right-radius: 10px; 
    -moz-border-radius-topright: 10px; 
    -moz-border-radius-bottomright: 10px; 
    border-top-right-radius: 10px; 
    border-bottom-right-radius: 10px; 
    border: none; 
    letter-spacing: 0.05em; 
} 

Answer 1

클래스

height: 69px; 
vertical-align:top; 

근무 데모 t.email : http://jsfiddle.net/edisutrisno/8V8dg/3/

Answer 2

여기 this-

input.submit { 
width: 20%; 
margin-left: -5px; 
margin-top: 50px; 
font-family: league; 
font-size: 30px; 
color: #efbe2a; 
height: 81px; 
background: #000000; 
-webkit-border-top-right-radius: 10px; 
-webkit-border-bottom-right-radius: 10px; 
-moz-border-radius-topright: 10px; 
-moz-border-radius-bottomright: 10px; 
border-top-right-radius: 10px; 
border-bottom-right-radius: 10px; 
border: none; 
letter-spacing: 0.05em; 
position:relative; 
top:4px; 
}