CSS和形式問題 - 給我爭:(

Question

我已經創建了一種形式，它應該是這個樣子：

screenshot http://s14.postimage.org/yoc1unp4h/Screen_Shot_2012_10_25_at_4_00_04_PM.jpg

能有人幫我修改我的代碼看起來像上面的圖片並解釋我做錯了什麼？JSFiddle將是驚人的，所以我可以理解如何解決它。

需要提出拉鍊標籤和字段，提交按鈕推到右邊，但它不工作我:(

我的企圖t是如下：

http://jsfiddle.net/2w6mK/

CSS：

#form-container { 
    width: 710px; 
    height: 450px; 
    padding: 20px 50px; 
    margin: 35px 0 0 25px; 
    } 

form { 
    position: relative; 
    margin-left: -10px; 
    } 

form label { 
    display: block; 
    font: normal 12px/16px arial, Arial, Helvetica, sans-serif; 
    font-weight: bold; 
    color: #000; 
    text-transform: uppercase; 
    text-align: left; 
    } 

form [type="text"], 

form [type="email"] { 
    display: block; 
    border: 1px solid #000; 
     -webkit-border-radius: 2px; 
     -moz-border-radius: 2px; 
    border-radius: 2px; 
     -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    font: 12px/14px arial, helvetica, verdana, sans-serif; 
    width: 60%; 
    padding: 5px 5px; 
    margin: 5px 0; 
     -webkit-appearance: none; 
    } 

.zip { 
    display: block; 
    border: 1px solid #000; 
     -webkit-border-radius: 2px; 
     -moz-border-radius: 2px; 
    border-radius: 2px; 
     -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    font: 12px/14px arial, helvetica, verdana, sans-serif; 
    width: 20%; 
    padding: 5px 5px; 
    margin: 5px 0; 
     -webkit-appearance: none; 
    } 

.dob-select { 
     display: block; 
    border: 1px solid #000; 
     -webkit-border-radius: 2px; 
     -moz-border-radius: 2px; 
    border-radius: 2px; 
     -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    font: 12px/14px arial, helvetica, verdana, sans-serif; 
    width: 80px; 
    height:25px; 
     -webkit-appearance: none; 
    overflow: hidden; 
    background: url("http://s17.postimage.org/4tmf81arf/down_arrow.png") no-repeat right #fff; 
    float: left; 
    margin-right: 5px; 
} 

.dob-select select { 
    background: transparent; 
    width: 125px; 
    height: 25px; 
    border: none; 
    padding: 5px 0 0 5px; 
    color: #cccccc; 
} 

.left { 
    float: left;  
} 
form [type="submit"] { 
    display: block; 
    background-image: url("http://findmuck.files.wordpress.com/2012/06/green_submit_button_by_rukiaxichigo15.jpg") no-repeat; 
    margin: 25px auto; 
    width: 154px; 
    height:57px; 
    border: none; 
    color: transparent; 
    font-size: 0; 
    float: left; 
    } 

form input[type=submit]:hover { 
    background-image: url("http://findmuck.files.wordpress.com/2012/06/green_submit_button_by_rukiaxichigo15.jpg") no-repeat; 
    cursor: hand; 
    cursor: pointer; 
} 

#FileUpload { 
    position:relative; 
    margin-top: -13px; 
    padding-bottom: 15px; 
    } 

#BrowserVisible { 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 1; 
    background:url(images/btn_browse.gif) 100% 0px no-repeat; 
    height:27px; 
    width:390px; 
    cursor: hand; 
    cursor: pointer; 
} 

#FileField { 
    display: block; 
    margin-right: 85px; 
    border: 1px solid #000; 
     -webkit-border-radius: 2px; 
     -moz-border-radius: 2px; 
    border-radius: 2px; 
     -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    font: 12px/14px arial, helvetica, verdana, sans-serif; 
    color: #777; 
    width: 300px; 
    padding: 5px 5px; 
    -webkit-appearance: none; 
} 

HTML：

<div id="form-container">    

      <form> 

       <fieldset> 
        <label for="name">Name</label> 
        <input type="text" name="name"> 
       </fieldset> 

       <fieldset> 
       <label for="dob">date of birth</label> 
       <div class="dob-select"> 
       <select name="dob_day"> 
       <option value="01">01</option> 

       </select> 
       </div> 
       <div class="dob-select"> 
       <select name="dob_month"> 
       <option value="01">Jan</option> 
       </select> 
       </div> 
       <div class="dob-select"> 
       <select name="dob_year"> 
       <option value="2012">2012</option> 
       </select> 
       </div> 
       </fieldset> 

       <fieldset> 
        <label for="zip">zip</label> 
        <input type="text" class="short" name="zip"> 
       </fieldset> 

       <fieldset> 
        <label for="email">Email</label> 
        <input type="email" name="email"> 
       </fieldset> 

       <fieldset>     
        <label for="subscribe"><input type="checkbox" class="left"> <p class="left">Tick</p></label> 
        <input type="submit" name="submit"> 
       </fieldset>  
      </form> 

</div> 

Answer 1

編輯2：

添加

.short{ 
    width: auto !important; 
} 

到CSS來繪製個全長的ZIP字段中的圖片。

---

編輯：刪除border: 1px solid silver;當你明白的定位是如何工作的，這對調試的目的;）

---

看：http://jsfiddle.net/pb6mM/3/

form input[type="submit"]{ 
    position: absolute; 
    right: 0; 
    bottom: 0; 
} 

fieldset{ 
    border: 1px solid silver; 
} 

.fieldsetDate{  
    padding-right: 30px; 
} 

.inlineBlock{ 
    display: inline-block; 
} 

並補充

margin-top: 6px; 
    margin-bottom: 6px; 

至.dob-select {，使其與普通文本字段的高度相同。

HTML：

<div id="form-container">    

      <form> 

       <fieldset> 
        <label for="name">Name</label> 
        <input type="text" name="name"> 
       </fieldset> 

       <fieldset class="fieldsetDate inlineBlock"> 
       <label for="dob">date of birth</label> 
       <div class="dob-select"> 
       <select name="dob_day"> 
       <option value="01">01</option> 

       </select> 
       </div> 
       <div class="dob-select" > 
       <select name="dob_month"> 
       <option value="01">Jan</option> 
       </select> 
       </div> 
       <div class="dob-select"> 
       <select name="dob_year"> 
       <option value="2012">2012</option> 
       </select> 
       </div> 
       </fieldset> 

       <fieldset class="inlineBlock"> 

        <label for="zip">zip</label> 
        <input type="text" class="short" name="zip"> 

       </fieldset> 

       <fieldset> 
        <label for="email">Email</label> 
        <input type="email" name="email"> 
       </fieldset> 

       <fieldset>     
        <label for="subscribe"><input type="checkbox" class="left"> <p class="left">Tick</p></label> 
        <input type="submit" name="submit"> 
       </fieldset>  
      </form> 

</div> 

Answer 2

添加Position:absolute到輸入按鈕。並且在html代碼中有輕微的變化。檢查演示。

DEMO

---

SAMPLE CSS FORM