我正在使用 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>
最佳答案
您将所有输入的宽度设置为相同。您当然不需要在复选框上设置 200 像素的宽度。
将不同的类名放在不同的输入类型上，并分别设置它们的样式。
您可能还想将表单包装在一个无序列表中，以允许它控制间距并清除 float 。
<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/
关于html - CSS 表单对齐问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14468701/