html - CSSとフォームの問題-私に争いを与えます:(

Question

フォームを作成しました。次のようになります。

誰かが私のコードを上の画像のように編集して、私が間違っていたことを説明するのを手伝ってもらえますか？JSFiddleは素晴らしいので、修正方法を理解できます。

zipラベルとフィールドを表示し、送信ボタンを右に押す必要がありますが、それでも機能しません:(

私の試みは次のとおりです。

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

Position:absolute入力ボタンに追加します。htmlコードにわずかな変更があります。デモを確認してください。

デモ

---

サンプルCSSフォーム

Answer 2

編集2：

追加

.short{
  width: auto !important;
}

写真のように完全な長さでZIPフィールドを描画するためにCSSに。

---

編集：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>