XSLTForms/CSS
可能存在兩種基本型別的佈局，人們可能希望
(1) 內聯表單 所有 Xform 控制元件“流入”頁面，並在當前行沒有足夠空間容納控制元件時移至下一行；
(2) 塊表單 所有 XForm 控制元件都出現在頁面上的單獨一行上，並垂直對齊。
“XForm 控制元件”指的是“標籤”、“值”和相關的“圖示”（幫助、有效/無效）。對於以上兩種情況，我們希望控制元件的所有部分都保持在同一行，標籤不應該與它的值分開。因此，在第一種情況下，所有部分都應該向下移至下一行，如果沒有足夠的空間。
每個 xform 控制元件透過 XSLTForms 樣式錶轉換為類似以下 HTML 結構的結構
span.xforms-control
|_span
|_span
|_span
|_span
| |_label
|_span.value
|_input
預設情況下，span 沒有“display”功能，因此透過向 XSLTForms 建立的 span 元素新增樣式，我們可以實現我們想要的結果。
因此，對於最小的樣式規則，首先為了使 Xform 控制元件中的所有內容保持在一起，我們可以使用以下 CSS 規則
span.xforms-control span {display:inline-block; white-space:nowrap; }
使用“white-space:nowrap”似乎在大多數瀏覽器上已經足夠了，但是新增“display:inline-block”似乎強制執行了 nowrap 行為。
然後，為了使控制元件標籤看起來“屬於”控制元件值，我們可以設定標籤的寬度，並將其設定為內聯塊
label.xforms-label { display:inline-block; width:300px; text-align:right; margin-right:4px;}
以上兩個選擇器似乎實現了您對 HTML 預設值的流佈局，但也使每個 XForm 控制元件都作為原子單元。
要獲得第二個表格佈局，只需強制每個控制元件出現在新行，如下所示
span.xforms-control {display:block;}
我們已經將每個標籤設定為標準寬度，這意味著值將很好地對齊。
但是，如果您不希望 xform 觸發按鈕的行為與其他控制元件相同，那麼您必須在 display:block 選擇器中更加具體，例如
span.xforms-input, span.xforms-select1, span.xforms-textarea, span.xforms-output {display:block;}
CSS XForms 偽元素和偽類選擇器在 XSLTForms 中未實現；相反，XSLTForms 生成包含等效類的元素，這些元素可以透過 CSS 規則進行選擇。
例如，而不是
/* Color current item yellow. */
::repeat-index {background-color: yellow;}
/* Within an invalid control, color the input field pink. */
:invalid ::value {background-color: pink;}
寫
/* Color current item yellow. */
.xforms-repeat-item-selected {background-color: yellow;}
/* Within an invalid control, color the input field pink. */
.xforms-invalid .xforms-value {background-color: pink;}
| CSS | 等效的 XSLTForms 類值 |
|---|---|
| ::value | .xforms-value |
| ::repeat-item | .xforms-repeat-item |
| ::repeat-index | .xforms-repeat-item-selected |
| CSS | 等效的 XSLTForms 類值 |
|---|---|
| :enabled & :disabled | .xforms-enabled .xforms-disabled |
| :required & :optional | .xforms-required .xforms-optional |
| :valid & :invalid | .xforms-valid .xforms-invalid |
| :read-only & :read-write | .xforms-readonly .xforms-readwrite |
| :out-of-range & :in-range | (未實現) |
| :value-empty & :value-non-empty | (未實現) |
這裡清楚地瞭解巢狀關係非常重要。偽屬性 :valid、:invalid 等被分配給控制元件；偽元素 ::value 是控制元件的子元素，而不是控制元件本身。因此，CSS 選擇器 ::value:invalid 或使用等效的 XSLTForms 類的等效選擇器 .xforms-value.xforms-invalid 都不會選擇任何內容：::value 偽元素沒有 :invalid 類。相反，偽元素位於具有該類的元素內部。（理論上，XForms 稱 ::value 偽元素是控制元件的子元素；實際上，出於實際原因，XSLTForms 使其成為後代，而不是子元素。）
如有疑問，仔細研究 XSLTForms 生成的 HTML 可以幫助表單作者理解如何編寫選擇所需元素的 CSS 選擇器。