如何在XHTML中通过行内CSS将单选按钮对齐到标签首字符下方

解决方法 #

直接给<z:selectOneRadio>添加带!important的行内样式，抵消第三方组件默认的左侧缩进即可：

<l:field label="Animal">
  <z:selectOneRadio id = "A1" value = "#{newEntity.Animal}" layout="pageDirection"
   showBorder="false" style="margin-left: -2ch !important; padding-left: 0 !important;">
    <f:selectItem itemLabel="Cat">
    <f:selectItem itemLabel="Dog">
  </z:selectOneRadio>
</l:field>

说明 #

• 单位ch表示单个数字/英文字符的宽度，-2ch刚好可以让单选按钮对齐到Animal首字符A的正下方，如果使用中文标签可以调整为-1em
• 加!important是为了覆盖第三方标签内置的默认样式，解决你之前设置padding、margin不生效的问题
  如果对齐有偏差，可以打开浏览器控制台查看<l:field>渲染生成的标签元素的左侧间距数值，把-2ch替换为对应负数值即可。

内容的提问来源于stack exchange，提问作者Anam Qureshi