html - CSS 和表单问题 - 让我争吵 :(

Question

我创建了一个表单，它应该看起来像这样：

有人可以帮我编辑我的代码，使其看起来像上图并解释我做错了什么吗？JSFiddle 会很棒，所以我可以理解如何修复它。

需要打开 zip 标签和字段并将提交按钮推到右侧，但它对我不起作用:(

我的尝试如下：

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>

score 1 · Accepted Answer

编辑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>

score 1 · Accepted Answer

添加Position:absolute到输入按钮。并且html代码有细微的变化。检查演示。

演示

示例 CSS 表单

html - CSS 和表单问题 - 让我争吵 :(

2 回答 2

Related

Reference