jsf中未应用css边距答案

【问题标题】：css margin not not applied in jsfjsf中未应用css边距
【发布时间】：2012-01-29 00:13:03
【问题描述】：

我有下面的 jsf 代码和 css 代码。我无法让 CSS 边距属性生效。除边距外，所有其他属性都可以正常工作。我做错了什么？

请注意 .contentDialog css 类应用于 p:dialog。我期望的是 f:facet name="header" 中的 h:outputText 周围有 100px 的边距。但它没有发生。

我已经在 IE 7、IE 8、FireFox 7.0.1 和 Chrome 16.0.912.63 m 上进行了测试。所有浏览器都有同样的问题。另外，我正在使用 PrimeFaces。

JSF 代码

<h:form id="newContentForm">
    <p:dialog header="New Menu Item Type..." widgetVar="newWidget" 
              resizable="false" showEffect="explode" hideEffect="explode" modal="true" closable="false"
              styleClass="contentDialog" width="440">
        <h:panelGrid id="newPopUpWindow" column="1">
            <!-- Grid Header -->
            <f:facet name="header">
                <h:outputText value="New information"/>
            </f:facet>

            <!-- Grid Body -->
            <h:outputText value="Description:"/>
            <p:inputText id="newDescriptionInText" value="#{menuItemTypeContent.selectedContent.menuItemTypeDescr}">         
                <p:ajax process="@this"/>
            </p:inputText>

            <!-- Grid Footer -->
            <f:facet name="footer">
                <!-- Dialog command bottons -->
                <h:panelGroup>
                    <!-- Submit -->
                    <p:commandButton value="Submit" image="ui-icon ui-icon-check"
                                     actionListener="#{menuItemTypeContent.save}"
                                     oncomplete="handleNewRequest(xhr, status, args)"/>
                    <!-- Cancel -->                                             
                    <p:commandButton value="Cancel" image="ui-icon ui-icon-close" 
                                     actionListener="#{menuItemTypeContent.clearContent}" 
                                     onclick="newWidget.hide()" type="reset"/>
                </h:panelGroup>                             
            </f:facet>                             
        </h:panelGrid>

        <!-- Submit javascript handler -->    
        <h:outputScript>
            function handleNewRequest(xhr, status, args) {
                if (args.duplicateSaveError) {
                    duplicateError.show();
                }else if (args.illegalStatusError) {
                    deleteError.show();
                }else if (args.validationFailed) {
                    newContentError.show();
                }else {
                    // Hide new content dialog box if add happened without exceptions
                    newWidget.hide();
                }
            }
        </h:outputScript>   
    </p:dialog>    
</h:form>

CSS 代码

.contentDialog {
    font-size:13px;
    border:2px solid #2D65B0;   
}

.contentDialog table {
    border:1px solid #8DB1E2;
    width:100%;
}
.contentDialog th {
    background-color:#2D65B0;
    width:100%;
    text-align:left;
    color:red;
    margin:100px;
}

【问题讨论】：

这些类在您的代码中应用在您的 CSS 中的什么位置？
你试过用 !important; ?像这样的边距：100px !important;
您不使用边距来设置表格单元格的样式。看看这里：stackoverflow.com/questions/716442/css-cell-margin
@mrembisz 这是正确的，应该作为答案发布。解决方案是使用padding。
@maple_shaft 好的，我做到了。大部分信息都在链接的问题下，但至少这个问题不再没有答案。

标签： css jsf primefaces

【解决方案1】：

这与 JSF 无关，而是与 CSS 和 html 相关。您不能使用边距来设置表格单元格的样式。您可以使用的是整个表格的单元格空间属性或单个单元格的填充。您可以在此question 下找到更多信息。

【讨论】：