css - 如何在没有 ? 的情况下实现对齐的对话框布局

Question

我目前正在使用这个 facelet:

<p:dialog id="eventDetailsDialog">
    <h:panelGroup layout="block" styleClass="dialogElement">
        <h:outputLabel for="title" value="Title:" />
        <p:inputText id="title" value="#{bean.title}" />
    </h:panelGroup>
    <h:panelGroup layout="block" styleClass="dialogElement">
        <h:outputLabel for="from" value="From:" />
        <p:calendar id="from" value="#{bean.startDate}" 
                    mode="popup" showOn="button" 
                    pattern="dd.MM.yyyy HH:mm">
        </p:calendar>
    </h:panelGroup>
    <h:panelGroup layout="block" styleClass="saveButton">
        <p:commandButton id="saveEventButton" value="Save"
            actionListener="#{bean.save}" />
    </h:panelGroup>
    <p:messages id="allMessages"/>
</p:dialog>

连同此样式表:

.dialogElement {
    margin: 0.2em;
}

.dialogElement label {
    width: 4em;
    display: inline-block;
}

.saveButton button {
    margin: 0 auto;
    margin-bottom: 0.2em;
    display: block;
}

创建一个对话框，其中的标签和字段很好地对齐。我发现不使用 <h:panelGroup> 就无法实现此布局。 - 围绕每个字段的标签。这是特别有问题的，因为<p:calendar>渲染和 <input> -带有 <button> 的字段在它的旁边。结果应如下所示(为简洁起见，上面的示例省略了一些字段，但布局相同):

有没有办法实现与上述解决方案相同的布局，但不使用 <h:panelGroup>或任何其他仅用于布局的组件(仅 CSS)？

Answer 1

您可以只使用纯 HTML。

<p:dialog id="eventDetailsDialog">
    <div class="dialogElement">
        <h:outputLabel for="title" value="Title:" />
        <p:inputText id="title" value="#{bean.title}" />
    </div>
    <div class="dialogElement">
        <h:outputLabel for="from" value="From:" />
        <p:calendar id="from" value="#{bean.startDate}" 
                    mode="popup" showOn="button" 
                    pattern="dd.MM.yyyy HH:mm">
        </p:calendar>
    </div>
    <div class="saveButton">
        <p:commandButton id="saveEventButton" value="Save"
            actionListener="#{bean.save}" />
    </div>
    <p:messages id="allMessages"/>
</p:dialog>

A <p>是semantically more correct .

<p:dialog id="eventDetailsDialog" styleClass="dialog">
    <p>
        <h:outputLabel for="title" value="Title:" />
        <p:inputText id="title" value="#{bean.title}" />
    </p>
    <p>
        <h:outputLabel for="from" value="From:" />
        <p:calendar id="from" value="#{bean.startDate}" 
                    mode="popup" showOn="button" 
                    pattern="dd.MM.yyyy HH:mm">
        </p:calendar>
    </p>
    <p>
        <p:commandButton id="saveEventButton" value="Save"
            actionListener="#{bean.save}" />
    </p>
    <p:messages id="allMessages"/>
</p:dialog>

与

.dialog p {
    margin: 0.2em;
}

.dialog label {
    width: 4em;
    display: inline-block;
}

.dialog p>button {
    margin: 0 auto;
    margin-bottom: 0.2em;
    display: block;
}