html - CSS表单对齐问题

Question

我正在使用 JSP 设计一个 html 表单。下面是我的css文件-

    body {
    font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial,
        Helvetica, sans-serif;
    font-size: 12px;
}

p,h1,form,button {
    border: 0;
    margin: 0;
    padding: 0;
}

.spacer {
    clear: both;
    height: 1px;
}
/* ----------- My Form ----------- */
.myform {
    margin: 0 auto;
    width: 400px;
    padding: 14px;
}

/* ----------- stylized ----------- */
#stylized {
    border: solid 2px #b7ddf2;
    background: #ebf4fb;
}

#stylized h1 {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 8px;
}

#stylized p {
    font-size: 11px;
    color: #666666;
    margin-bottom: 20px;
    border-bottom: solid 1px #b7ddf2;
    padding-bottom: 10px;
}

#stylized label {
    display: block;
    font-weight: bold;
    text-align: right;
    width: 140px;
    float: left;
}

#stylized .small {
    color: #666666;
    display: block;
    font-size: 11px;
    font-weight: normal;
    text-align: right;
    width: 140px;
}

#stylized input {
    float: left;
    font-size: 12px;
    padding: 4px 2px;
    border: solid 1px #aacfe4;
    width: 200px;
    margin: 2px 0 20px 10px;
    height: 30px;
}

#stylized checkbox {
    float: left;
    font-size: 12px;
    padding: 4px 2px;
    border: solid 1px #aacfe4;
    width: 10px;
    margin: 2px 0 20px 10px;
}

#stylized select {
    float: left;
    font-size: 12px;
    padding: 4px 2px;
    border: solid 1px #aacfe4;
    width: 250px;
    margin: 2px 0 20px 10px;
    height: 100px;
}

#stylized button {
    clear: both;
    margin-left: 150px;
    width: 125px;
    height: 31px;
    background: #666666 url(img/button.png) no-repeat;
    text-align: center;
    line-height: 31px;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: bold;
}

下面是我使用 JSP 构建的表单。

<div id="stylized" class="myform">

        <form:form id="form" name="form" method="POST" action="/showResponse">
            <h1>Service call Form</h1>
            <p></p>

            <form:label path="userId">User Id
                <span class="small">Enter User Id</span>
            </form:label>
            <form:input name="name" id="name" path="userId" />

            <form:label path="debugFlag">Debug Flag :
                <span class="small">Select Debug Flag</span>
            </form:label>
            <form:checkbox path="debugFlag" name="name" id="name" />


            <form:label path="attributeNames">Attribute Names :
                <span class="small">Select Attribute Names</span>
            </form:label>
            <form:select path="attributeNames" items="${attributeNamesList}"
                multiple="true" name="name" id="name" />

            <form:label path="machineName">Machine Name
                <span class="small">Enter Machine Name</span>
            </form:label>
            <form:input name="name" id="name" path="machineName" />

            <form:label path="portNumber">Port Number
                <span class="small">Enter Port Number</span>
            </form:label>
            <form:input path="portNumber" name="name" id="name" />


            <button type="submit">Submit</button>
            <div class="spacer"></div>

        </form:form>
    </div>

我面临的唯一问题是，它没有与它的标签和相应的输入正确对齐。下面是截图——

在此处输入图像描述

仅正确分配了用户 ID 和调试标志。除此之外，它以某种方式搞砸了。谁能告诉我我在 CSS 中做错了什么？

查看页面源代码后的实际 HTML 代码-

<html>
<head><link href="/ressvr/z/u4/apo4x4yiqe23jo4erdz5ig4tm.css?dataUri=true" type="text/css" rel="stylesheet"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="layout" content="main" />
    <title>Sample App</title>
</head><body><div id="stylized" class="myform">

        <form id="form" name="form" action="/showResponse" method="POST"><h1>Service call Form</h1>
            <p></p>

            <label for="userId">User Id
                <span class="small">Enter User Id</span>
            </label><input id="name" name="userId" name="name" type="text" value=""/><div class="spacer"></div>

            <label for="debugFlag">Debug Flag
                <span class="small">Select Debug Flag</span>
            </label><input id="name" name="debugFlag" name="name" type="checkbox" value="true"/><input type="hidden" name="_debugFlag" value="on"/><div class="spacer"></div>

            <label for="attributeNames">Attribute Names
                <span class="small">Select Attribute Names</span>
            </label><select id="name" name="attributeNames" name="name" multiple="multiple"><option value="ACCOUNT">ACCOUNT</option><option value="ADVERTISING">ADVERTISING</option><option value="INFORMATION">INFORMATION</option></select><input type="hidden" name="_attributeNames" value="1"/><div class="spacer"></div>

            <label for="machineName">Machine Name
                <span class="small">Enter Machine Name</span>
            </label><input id="name" name="machineName" name="name" type="text" value=""/><div class="spacer"></div>

            <label for="portNumber">Port Number
                <span class="small">Enter Port Number</span>
            </label><input id="name" name="portNumber" name="name" type="text" value=""/><div class="spacer"></div>

            <button type="submit">Submit</button>
            <div class="spacer"></div>

        </form></div>
</body></html>

score 1 · Accepted Answer

您将所有输入的宽度设置为相同。您当然不需要复选框上的 200px 宽度。

将不同的类名放在不同的输入类型上并单独设置它们的样式。

您可能还希望将表单包装在无序列表中，以允许它控制间距并清除浮动。

<fieldset>
  <legend>Delivery Details</legend>
  <ol>
    <li>
      <label for="name">Name<em>*</em></label>
      <input id="name" />
    </li>
    <li>
      <label for="address1">Address<em>*</em></label>
      <input id="address1" />
    </li>
    <li>
      <label for="address2">Address 2</label>
      <input id="address2" />
    </li>
    <li>
      <label for="town-city">Town/City</label>
      <input id="town-city" />
    </li>
    <li>
      <label for="county">County<em>*</em></label>
      <input id="county" />
    </li>
...

这是一个很好的指南：http ://www.alistapart.com/articles/prettyaccessibleforms/

score 0 · Accepted Answer

看起来您需要添加 clear:both; 到您的表单元素或在每个表单元素之间使用<div class="spacer"></div>标签。

score -1 · Accepted Answer

-1

作为替代方案，您可以使用 Table 标记以正确的格式放置 html 控件。

于 2014-03-04T05:58:35.107 回答

html - CSS表单对齐问题

3 回答 3

Related

Reference