Question

我无法构建嵌套在另一个panelGrid中的ALTER TABLE projects MODIFY project_id GENERATED BY DEFAULT ON NULL AS IDENTITY ( START WITH 150000);，以便其内容（提交按钮）右对齐，并且容器panelGrid中的其他所有内容都保持对齐。 panelGrid是一个小表单的一部分，它只包含一个输入字段，并且只有一列：

panelGrid

这是风格：

<h:panelGrid id="containerGrid" columns="1" cellpadding="10">

    <h:outputText id="commentIntro" value="#{myBean.commentIntro}"/>

    <h:outputLabel for="comment" value="Comment:"/>
    <h:inputTextarea id="comment" title="Comment" value="#{myBean.comment}"/>

    <h:panelGrid id="nestedGrid" columns="2" cellpadding="10" columnClasses="rightAlign,rightAlign">

        <h:commandButton id="submit" value="Submit" actionListener="#{myBean.processSubmit}"/>

        <h:commandButton id="cancel" value="Cancel" actionListener="#{myBean.processCancel}"/>
    </h:panelGrid>

</h:panelGrid>

提交按钮仍然显示左对齐。我如何左对齐它们？

Answer 1

左侧显示按钮的原因是：外部表格有1列，每个表格单元格中的数据显示在左侧（直到定义了其他数据）。这意味着您的所有内容的内部表将显示在外部表的相关单元格的左侧。为内部表列设置rightAlign样式，而不是反映到外部表。如果要在右侧显示按钮，则应在按钮表所在的单元格中更改流量。在以下代码中添加了样式：

<h:panelGrid id="containerGrid" columns="1" cellpadding="10" width="100%">
    <h:outputText id="commentIntro" value="Some text..." />
    <h:outputLabel for="comment" value="Comment:"/>
    <h:inputTextarea id="comment" title="Comment" value="comment..." />
    <h:panelGrid id="nestedGrid" columns="2" cellpadding="10" style="float: right;">
        <h:commandButton id="submit" value="Submit" />
        <h:commandButton id="cancel" value="Cancel" />
    </h:panelGrid>
</h:panelGrid>

结果按钮显示在右侧。

Answer 2

您正在为表中的嵌套表中的单元格分配类。当你按下f12并检查开发工具时会更加敏感，因为我很难用文字解释，但基本上你没有可用空间来对齐它。就像你在html中有这个：

<div style="display:inline-block;text-align:right; border: 1px solid red;">t</div>

这样做什么都没有，因为内容被容器包围（注意内联块）。

第二个表位于包含填充的单元格内，然后是第二个表格的单元格填充... arh

基本上我想说的是没有可用空间来移动按钮。细胞围绕着它们。它们有点在右边，因为细胞的填充物不同。

你的html输出是这样的：

<table id="containerGrid" cellpadding="10">
  <tbody>
    <tr>
      <td><span id="commentIntro">intro</span></td>
    </tr>
    <tr>
        <td><label for="comment">Comment:</label></td>
    </tr>
    <tr>
        <td><textarea id="comment" name="comment" title="Comment"></textarea></td>
    </tr>
    <tr>
        <td>
       <!-- here is the table containing the buttons which takes the space it
           needs and the td adjust accordingly. -->
            <table id="nestedGrid" cellpadding="10">
                <tbody>
                    <tr>
                    <td class="rightAlign"><button id="submit" name="submit">Submit</button></td>
                    <td><button id="cancel" name="cancel">Cancel</button></td>
                </tr>
            </tbody>
        </table>
        </td>
</tr>
</tbody>
</table>

说过你的问题不再具有太大的意义，但你可能会想出你现在想做什么。另外，如果你不使用带有primefaces的开发工具，尤其是使用菜单项，你会感到疯狂，那件事很糟糕。

右对齐panelGrid嵌套在另一个内部

2 个答案: