Css 右对齐嵌套在另一个窗格中的panelGrid

我在构建嵌套在另一个panelGrid中的

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>

---

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

您正在为表中嵌套表中的单元格分配一个类。 当你按下f12键并检查开发工具时，它会变得更加有意义，因为我很难用文字来解释，但基本上你没有空间来对齐它。例如，如果您希望在html中使用：

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

t

因为内容被容器包围（请注意内联块），所以这不会起任何作用

第二个表位于包含填充的单元格内，然后是第二个表的单元格的填充和。。啊

基本上我想说的是，没有空间可以移动按钮。细胞围绕着它们。它们有点偏右，因为单元格的填充不同

您的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（尤其是menuitems）结合使用，您会发疯的。这件事很糟糕。

您正在为表中嵌套表中的单元格分配一个类。 当你按下f12键并检查开发工具时，它会变得更加有意义，因为我很难用文字来解释，但基本上你没有空间来对齐它。例如，如果您希望在html中使用：

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

t

因为内容被容器包围（请注意内联块），所以这不会起任何作用

第二个表位于包含填充的单元格内，然后是第二个表的单元格的填充和。。啊

基本上我想说的是，没有空间可以移动按钮。细胞围绕着它们。它们有点偏右，因为单元格的填充不同

您的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（特别是menuitems）一起使用，您会发疯的，这很糟糕。

左侧显示按钮的原因是：外部表格有一列，每个表格单元格中的数据都显示在左侧（直到定义其他单元格）。这意味着包含所有内容的内部表格将显示在外部表格的相关单元格的左侧<代码>右对齐样式是为内部表格列设置的，不会反映到外部表格。若你们想在右边显示按钮，你们应该改变单元格中的流程，那个里是按钮表所在的位置。在以下代码中添加了样式：

<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>

---

结果按钮显示在右侧。

按钮显示在左侧的原因是：外部表格有一列，每个表格单元格中的数据显示在左侧（直到定义了其他单元格）。这意味着包含所有内容的内部表格将显示在外部表格的相关单元格的左侧<代码>右对齐样式是为内部表格列设置的，不会反映到外部表格。若你们想在右边显示按钮，你们应该改变单元格中的流程，那个里是按钮表所在的位置。在以下代码中添加了样式：

<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>

---

结果按钮显示在右侧。

请按照@ced说明执行：学习使用浏览器开发工具和基本html和css。在这个问题上没有jsf。我不同意，因为我使用jsf标记生成HTML（

panelGrid

-->HTML表），因为我没有使用TDs和TRs，我知道我的CSS规范应该放在哪里。我发现JSF在一个与

行类

和

列类

纠结的表中分配类的方法。这就是为什么这是一个JSF问题。关于你的“学你的东西”傲慢的评论，你也许应该考虑到有不同的学习风格，自上而下（那些更适合首先学习广泛的基础知识，然后应用它）和自下而上。（那些喜欢它的人学会做事，然后……用零碎的东西把全局放在一起。我属于后一类。这不是傲慢，而是在花了大量时间研究StackOverflow和观察类似问题后的事实陈述。让我解释一下为什么。正如你所说，JSF是一个HTML生成器。在JSF中你可以阅读

行类

和

列类

的一般用途。在浏览器开发工具中，你可以看到它们的最终位置，所有这些都是TD、TR或DIV等。所有这些都只是html。通过了解css选择器的工作原理、css的特殊性等，在大多数情况下很容易设置样式，右对齐或右对齐a使用浏览器开发工具进行开发。因此，您的开发就像去汽车垃圾场，购买备件，期望能够建造一辆法拉利，而不是先去汽车学校或从一个电动肥皂盒开始？请按照@ced s的方式进行