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>

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

enter image description here

仅正确分配了用户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>

Answer 1

您要将所有输入的宽度设置为相同。您当然不需要在复选框上使用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/

Answer 2

看起来你需要添加清晰：两者;到表单元素或在每个表单元素之间使用<div class="spacer"></div>标记。

Answer 3

作为替代方法，您可以使用Table标记以适当的格式放置html控件。

CSS表单对齐问题

3 个答案: