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 选择器。