使用css / jsf-2的文本元素的距离相同

Question

您可以看到，电子邮件和电子邮件之间的距离等于成员的距离和日期。

我的代码（使用jsf-2）：

    <h:outputText value="email" />
    <p:spacer width="50" height="10" />
    <h:outputText value="sasdrftg@rfghre.de" />
    <br></br>
    <h:outputText value="member since" />

    <p:spacer width="50" height="10" />
    <h:outputText value="#{userUtilityBean.user.registered.time}">
        <f:convertDateTime type="both" dateStyle="short" />
    </h:outputText>

我的CSS很简单：

.form-userdata {
position: absolute;
left: 30% !important;
color: blue !important;

}

如何将电子邮件与日期的“x位置”对齐？

Answer 1

对于此类信息演示，请使用h:panelGrid代替

<h:panelGrid columns="2">
    <h:outputText value="email" />
    <h:outputText value="sasdrftg@rfghre.de" />

    <h:outputText value="member since" />
    <h:outputText value="#{userUtilityBean.user.registered.time}">
        <f:convertDateTime type="both" dateStyle="short" />
    </h:outputText>
</h:panelGrid>