Question

我有newcss.css

#formdiv {
    width: 30%;
    margin: 150 auto;

}

和复合组件

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:composite="http://java.sun.com/jsf/composite">
    <composite:interface>
    </composite:interface>
    <composite:implementation>
             <h:form id="formdiv">
                 ...
             </h:form>
    </composite:implementation>
</html>

当我尝试在index.xhtml中使用此组件时，我无法观察CSS应用的任何效果。

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:lpform="http://xmlns.jcp.org/jsf/composite/mycomp"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
    <form>
        <mycomp:comp/>
    </form>
</html>

我需要将我的复合材料组件放在中心位置。

Answer 1

您遇到的问题是复合组件本身正在为表单的ID设置前缀。如果您直接在主页中使用h:form，则会在客户端看到表单ID值为formdiv（并且可以正确地获取其样式）。

但是，当您使用复合时，JSF会为复合本身设置一个id，因此对于您的表单，您将拥有j_idtx:formdiv。最简单的方法是使用样式类而不是css选择器：

.formdivClass {
    width: 30%;
    margin: 150px auto;
}

<composite:implementation>
   <h:form styleClass="formdivClass">
     ...
   </h:form>
</composite:implementation>

另见：

Answer 2

问题是您为margin属性设置了无效值，因此浏览器会忽略它。您必须在数值上指定单位，除非它为零。所以在这种情况下你可以这样修复它（如果你想要150像素的顶部和底部边距）：

#formdiv {
    width: 30%;
    margin: 150px auto;
}

复合组件和CSS

2 个答案: