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;}
請注意，一些舊瀏覽器不支援子 (大於) 選擇器。