Question

我有以下表单，除了表单底部的提交按钮外，所有内容都正确格式化：它们应该居中。

我尝试了各种不同的嵌套div组合以及设置宽度，边距和文本对齐方式，但我似乎无法弄清楚我做错了什么。

这是我到目前为止所拥有的......

HTML

<form id="myForm" action="#" method="post">
    <div>
        <label for="pickone" id="ruleTypeLabel">Pick One: </label>
        <select id="pickone" name="pickone">
            <option value="1">1</option>
            <option value="2" selected="selected">2</option>
        </select>
    </div>
    <div>
        <label for="field1" id="field1label">Field 1: <span class="helpercomment">xx123</span></label>
        <input type="text" id="field1" name="field1" />
    </div>
    <div>
        <label for="field2" id="field2label">field 2: </label>
        <input type="text" id="field2" name="field2" />
    </div>
    <div>
        <label for="field3" id="field2">field 3: <span class="helpercomment">Separate by commas</span></label>
        <textarea id="field 3" name="field 3"></textarea>
    </div>
    <div>
        <label for="field4" id="field4label">field 4: </label>
        <input type="text" id="field4" name="field4" />
    </div>
    <div>
        <label for="startDate" id="startDateLabel">Start Date: <span class="helpercomment">MM/DD/YYYY</span></label>
        <input type="text" id="startDate" name="startDate" class="date"/>
        <a href="#" class="calendaricon">
            <img src="Calendar.png" />
        </a>
    </div>
    <div>    
        <label for="endDate" id="endDateLabel">End Date: <span class="helpercomment">MM/DD/YYYY</span></label>
        <input type="text" id="endDate" name="endDate" class="date"/>
        <a href="#" class="calendaricon">
            <img src="Calendar.png" />
        </a>
    </div>

    <div>
        <div class="buttonrow">
            <input type="submit" id="submitButton" value="Submit" />
            <input type="submit" id="cancelButton" value="Cancel" />
        </div>
    </div>

</form>

和css：

form {
    width:300px;
    margin:10px auto;
}

form div {
    clear:both;
    width:100%;
}

form div label {
    display:block;    
    text-align:right;
    width:140px;
    float:left;
}

form div label .helpercomment{
    display:block;
    font-size:.8em;
    font-style:italic;
    color:#C1C2D7;
    background-color:#FFF;
    text-align:right;
}

form div input, form select, form textarea {
    float:left;
    width:140px;
    margin:2px 0 20px 10px;

}

form div input.date {
    width:113px;
}

form div a.calendaricon {

}

form div  a.calendaricon img {
    display:inline;
    border:none;
    margin-top:2px;
    margin-left:4px;
}

form div div.buttonrow {
    text-align:center;
    width:auto;
    margin:auto;
}

.buttonrow #submitButton, .buttonrow #cancelButton {

    width:auto;

}

Answer 1

按钮是浮动的（因为它们也是input）。将它们更改为<button>或修改CSS：

.buttonrow #submitButton, .buttonrow #cancelButton {

    float: none;
    width:auto;

}

http://jsfiddle.net/UcPD2/

Answer 2

使用样式无序列表比使用DIV格式化表单要好得多。

form ul, form li {
   margin:0;
   padding:0
}


<ul>
    <li><label>....</label> <input ... /></li>
    ...
</ul>

CSS - 简单的表单没有正确格式化

2 个答案: