XForms/地址对齐
< XForms
如果表单对齐，则使用起来会容易得多。此示例使用 CSS 表格结构来对齐我们的表单。它将组转换为表格，输入转换为行，标签和值转换为单元格。
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms">
<head>
<title>Address Form Aligned Using CSS</title>
<style type="text/css"><![CDATA[
/* a stylesheet for X-Forms input field alignment */
@namespace xf url("http://www.w3.org/2002/xforms");
/* give the input form labels and the fieldset legend a bold sans-serif font */
label, legend {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
/* give the fieldset some breathing room */
fieldset {
padding: 5px;
width: 260px;
}
/* the labels are right-aligned in a 150px wide column */
xf|label {
width: 150px;
margin: 3px;
text-align: right;
}
/* the input values are left aligned */
xf|value {
text-align: left;
}
/* vertical area between input boxes */
input {
margin: .2em;
}
/* each group is our table */
xf|group {
display: table;
}
/* each input is a row in the group table */
xf|input {
display: table-row;
}
/* each label within an input is a cell in the input row */
xf|input xf|label {
display: table-cell;
}
/* each value (pseudo-element) is also a cell in the input row */
xf|input::value {
display: table-cell;
}
]]>
</style>
<xf:model>
<xf:instance xmlns="">
<Address>
<LocationStreetFullText />
<LocationStreetFullText2 />
<LocationCityName />
<LocationStateName />
<LocationPostalID />
</Address>
</xf:instance>
</xf:model>
</head>
<body>
<xf:group>
<fieldset>
<legend>Mailing Address</legend>
<xf:input ref="LocationStreetFullText">
<xf:label>Street: </xf:label>
</xf:input>
<xf:input ref="LocationStreetFullText2">
<xf:label />
</xf:input>
<xf:input ref="LocationCityName">
<xf:label>City:</xf:label>
</xf:input>
<xf:input ref="LocationStateName">
<xf:label>State:</xf:label>
</xf:input>
<xf:input ref="LocationPostalID">
<xf:label>Postal Code:</xf:label>
</xf:input>
</fieldset>
</xf:group>
</body>
</html>
此样式表只涵盖 XForms <xf:input> 标签。如果您想对齐选择、选择1、文本区域和其他控件，则需要添加内容。在本食谱的后面部分将介绍如何使用完整的 CSS 文件来实现这一点。
请注意，为了使此样式表生效，您必须将输入放在组元素内。
还要注意，如果标签过长，表格可能会增长。
请注意，display: table 属性在 FireFox 中有效，但在不支持表格布局的旧浏览器中可能无效。
您可以通过 float:left CSS 控件和块显示的奇特交互来控制标签列的宽度。基本上，如果您尝试控制块的宽度，它可能无效，除非您也为标签添加 float:left。
这是对此有效的 CSS
/* This line ensures all the separate input controls appear on their own lines */
xf|input, xf|select, xf|select1, xf|textarea {display:block; margin:5px 0;}
/* Makes the labels right aligned in a 250px wide column that floats to the left of the input controls. */
xf|input > xf|label, xf|select > xf|label, xf|select1 > xf|label, xf|textarea > xf|label
{text-align:right; padding-right:10px; width:250px; float:left; text-align:right;}
请注意，一些旧浏览器不支持子 (大于) 选择器。