Question

正如您在图片中看到的那样，边框与<aui:container>顶部之间没有空格。

我已经尝试过不同的方法来通过填充或边距等css添加间距，但没有任何事情发生。

你能帮我添加箭头指向图像的空间吗？

感谢＆＃39; S

这里是jsp文件：

<%@page import="xxx.CreatePortlet"%>
<%@ include file="init.jsp"%>
<html>
<body class="borderBlackOne">

    <div class="bottomLine" id="MainTitle" style="text-align: center">
        <h1>Créer une REP</h1>
    </div>

    <aui:form action="<%=updateRepAction%>" method="post" id="updateForm" name="<portlet:namespace/>updateForm">

        <aui:fieldset>

            <aui:container cssClass="borderBlackOne">

                <aui:container cssClass="paddingTop"> <!-- Don't work -->

                    <aui:row>
                        <aui:col cssClass="alignRight" width="<%=25%>">
                            <span class="bold black"><liferay-ui:message key="manage.nameLabel" /></span>
                        </aui:col>


                        <aui:col width="<%=75%>">
                            <aui:input cssClass="" name="repName" required="true" label="" type="text" value="" />
                        </aui:col>
                    </aui:row>
                </aui:container>

                <!-- Nom de l'auteur -->
                <aui:container>
                    <aui:row>
                        <aui:col cssClass="alignRight" width="<%=25%>">
                            <span class="bold black"><liferay-ui:message key="manage.authorNameLabel" /></span>
                        </aui:col>


                        <aui:col width="<%=75%>">
                            <span class="fill">${authorName}</span>
                        </aui:col>
                    </aui:row>
                </aui:container>

                <!-- Commentaire -->
                <aui:container cssClass="">
                    <aui:row>
                        <aui:col cssClass="alignRight" width="<%=25%>">
                            <span class="bold black"><liferay-ui:message key="manage.comentaryLabel" /></span>
                        </aui:col>


                        <aui:col width="<%=75%>">
                            <aui:input cssClass="" name="comentary" label="" type="textarea" value="" />
                        </aui:col>
                    </aui:row>
                </aui:container>

                <!-- Configuration services -->
                <aui:container>
                    <aui:row>
                        <aui:col cssClass="alignRight" width="<%=25%>">
                            <span class="bold black"><liferay-ui:message key="manage.ServiceLabel" /></span>
                        </aui:col>


                        <aui:col width="<%=75%>">
                            <aui:container cssClass="borderBlackOne">
                                <aui:row>
                                    <aui:col cssClass="alignRight" width="<%=25%>">
                                        <span class="bold black"><liferay-ui:message
                                                key="manage.rep.servicesLabel" /></span>
                                    </aui:col>


                                    <aui:col width="<%=75%>">
                                        <aui:input name="comentary" label="" type="textarea" value="" />
                                    </aui:col>
                                </aui:row>
                                <aui:row>
                                    <aui:col cssClass="alignRight" width="<%=25%>">
                                        <span class="bold black"><liferay-ui:message
                                                key="manage.SystemeLabel" /></span>
                                    </aui:col>


                                    <aui:col width="<%=75%>">
                                        <aui:input name="comentary" label="" type="textarea" value="" />
                                    </aui:col>
                                </aui:row>
                            </aui:container>
                        </aui:col>
                    </aui:row>
                </aui:container>
                <aui:button-row cssClass="alignRight">
                        <aui:button type="cancel" value="Annuler"></aui:button>
                        <aui:button type="submit" value="Ok"></aui:button>
                </aui:button-row>
            </aui:container>
        </aui:fieldset>
    </aui:form>
</body>
</html>

以下是css文件：

/* Don't work */
.create .paddingTop {
    margin-top: 5%
}

/* Don't work */
.create .paddingBottom {
    margin-bottom: 25px;
}

/* Don't work */
.create .marges {
    margin: 25px 0px 50px 0px;
}

.create .black {
    color: black;            
}

.create .bold {
    font-weight: bold;
}

.create .alignRight {
    text-align: right;
}

.create .borderBlackOne {
    border: 1px solid black;            
}

Answer 1

aui:container和aui:row生成HTML div元素，因此margin-x应该有效。我认为，问题可能出在您定义的CSS选择器上，或者它们可能存在冲突。

<强>尝试：
1.在CSS属性后添加!important（例如margin-top: 5% !important;）。或
2.从CSS选择器中删除.create。 OR
3. 1＆amp; 2。

在aui：row之间添加空格

1 个答案: