复合组件和 CSS答案

【问题标题】：Composite component and CSS复合组件和 CSS
【发布时间】：2013-12-16 11:50:32
【问题描述】：

我有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>

我需要我的复合组件位于中心。

【问题讨论】：

标签： html css jsf

【解决方案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>

另请参阅：

【讨论】：

它不起作用。我不明白，为什么。需要什么？
从您的组合中删除输出样式表标签，只在您的主页中使用。 jsf 需要知道要包含哪些 css 文件。
还有关于that，不要发布两次相同的主题。您的问题将被标记为重复并被删除。最好编辑相同的问题添加新内容，以使其再次相关。

【解决方案2】：

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

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

【讨论】：

这肯定是一个错误，但其他地方可能还有其他错误。您能否提供实际页面的 URL，或者至少提供其代码（提供给客户）？
stackoverflow.com/questions/20300578/…