Html CSS表单对齐问题_Html_Css_Jsp

Html CSS表单对齐问题

html css jsp

Html CSS表单对齐问题,html,css,jsp,Html,Css,Jsp,我正在使用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 {

我正在使用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
输入用户Id
调试标志：
选择调试标志
属性名称：
选择属性名称
机器名
输入机器名
端口号
输入端口号
提交

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

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


示例应用程序
服务电话表格

用户Id
输入用户Id
调试标记
选择调试标志
属性名称
选择属性名称
会计广告信息
机器名
输入机器名
端口号
输入端口号
提交

看起来您需要添加清楚的内容：两者都有；或在每个表单元素之间使用

标记。

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


送货详情

名字*


地址*


地址2


城镇


郡*

...

这是一个很好的指南：

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

进行更改后，所有标签都非常接近其相应的输入。不确定您的意思，您做了什么更改？你能发布你的新html吗？嗨，sherrie，我已经用我正在使用的新html源代码和新css更新了我的问题。你能看一下吗。我现在面临的唯一问题是checkbox正在走得很远。不知道为什么？不知怎的，我说它不起作用了。对于复选框，它标识为输入css。