如何使表格排隊？

以下是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; 
}

來源

2014-02-19 ben_dchost

請在您的問題中包含您遇到問題的代碼中最重要的部分。在點擊任何URL之前，首先得到關於問題的第一印象總是更好。代碼不一定非常多（實際上，代碼很簡短並且重點更好），但只需要一些代碼就可以給我們留下問題的印象。 – Joeytje50

你可以從你的輸入域名輸入設置vertical-align: middle;到內聯元素，並刪除無用的頂部/底部margin。

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

WORKING FIDDLE。

來源

2014-02-19 14:56:32

非常感謝你！正是我想要的！ –

如何使表格排隊？

回答

相關問題