양식을 작성하는 방법은 무엇입니까?

Question

여기에 코드가 있습니다 http://jsfiddle.net/8yUSn/

'도메인 이름 입력', 선택자 목록 및 버튼이 완전히 아래쪽에 정렬되게하려면 어떻게해야합니까? 나는 몇 가지를 시도했지만 올바르게 할 수없는 것처럼 보입니다.

HTML

<div id="insideimagesearch" class="elegantaero"> 

    <form method="get" action="dac" onsubmit="return check_domain_input()"accept-charset="utf-8"> 
     <h1>Create Your Domain. It's simple.</h1> 
     <input type="text" name="domain" value="" placeholder="Enter Domain Name"/> 
     <select name="tld" class="tld"> 
      <option value="">select</option> 
      <option value="co.uk">.co.uk</option> 
      <option value="me.uk">.me.uk</option> 
      <option value="org.uk">.org.uk</option> 
      <option value="biz">.biz</option> 
      <option value="com">.com</option> 
      <option value="info">.info</option> 
      <option value="name">.name</option> 
      <option value="net">.net</option> 
      <option value="org">.org</option> 
      <option value="eu">.eu</option> 
     </select> 
     <input type="button" class="button" value="Search" /> 

    </form> 
</div> <!-- end of insideimagesearch class elegantaero--> 

CSS

/* Elegant Aero */ 
.elegantaero { 
    width: 600px; 
    margin-right: auto; 
    margin-left: auto; 
    background: #DDF0F8; 
    padding: 30px 30px 20px 30px; 
    box-shadow: #868686 0 0px 10px -1px; 
    -webkit-box-shadow: #868686 0 0px 10px -1px; 
    font: 12px Arial, Helvetica, sans-serif; 
    color: #666; 
} 
.elegantaero h1{ 
    font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif; 
    padding: 20px 10px 20px 30px; 
    display: block; 
    font-weight: 600; 
    color: #FFFFFF; 
    background: #44B6F5; 
    margin-top: -30px; 
    margin-left: -30px; 
    margin-right: -30px; 
    border-bottom: 1px solid #B9E1F1; 
} 


.elegantaero input[type="text"], .elegant-aero input[type="email"], .elegant-aero textarea, .elegant-aero select { 
    color: #888; 
    width: 65%; 
    padding: 5px 4px 0px 5px; 
    margin-top: 2px; 
    margin-right: 6px; 
    margin-bottom: 16px; 
    border: 1px solid #CEE2E7; 
    background: #FBFBFB; 
    outline: 0; 
    -webkit-box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2); 
    box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2); 
    font: 200 24px/24px Arial, Helvetica, sans-serif; 
} 
.elegantaero textarea{ 
    height:100px; 

} 
.elegantaero select { 
    background: #fbfbfb url(../img/index/header/down-arrow.png) right; 
    background: #fbfbfb url(../img/index/header/down-arrow.png) no-repeat right; 
    appearance:none; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    text-indent: 0.01px; 
    text-overflow: ''; 
    width: 60px; 
    height: 30px; 
} 
.elegantaero .button{ 
    padding: 10px 30px 10px 30px; 
    background: #44B6F5; 
    border: none; 
    color: #FFF; 
    font-weight:bold; 
} 
.elegantaero .button:hover{ 
    background: #0977B4; 
} 

Answer 1

당신은 당신의 도메인 이름을 입력합니다 입력에서 쓸모 위/아래 margin를 인라인 요소에 vertical-align: middle;를 설정하고 제거 할 수 있습니다.

.elegantaero input[type="text"], 
.elegantaero select, 
.elegantaero .button { 
    vertical-align: middle; 
} 

WORKING FIDDLE.