我有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>
我需要我的复合组件位于中心。
最佳答案
您遇到的问题是复合组件本身正在为您的表单 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>
另请参阅:
关于html - 复合组件和 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20300044/