右对齐 panelGrid 嵌套在另一个内答案

【问题标题】：Right aligning panelGrid nested inside another右对齐 panelGrid 嵌套在另一个内
【发布时间】：2015-12-14 21:57:54
【问题描述】：

我在构建嵌套在另一个 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>

风格如下：

.rightAlign {
    text-align:right;
}

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

【问题讨论】：

请按照@ced 的说明进行操作：学习使用浏览器开发工具和基本的 html 和 css。这个问题没有jsf。
我不同意，因为我使用 JSF 标记来生成 HTML（panelGrid --> HTML 表），因为我没有使用 TD 和 TR，我知道在其中放置我的 CSS 规范。我发现 JSF 在表格中分配类的方式与 rowClasses 和 columnClasses 复杂。这就是为什么这是一个 JSF 问题。关于你“学你的东西”的傲慢评论，你或许应该考虑到有不同的学习方式，自上而下（更适合的人先学习广泛的基础知识然后应用它）和自下而上（那些更喜欢它学会做事，然后……
用点点滴滴来拼凑大局。我属于后者
这不是傲慢，而是在 StackOverflow 上花费大量时间并观察类似问题后的事实陈述。让我解释一下为什么。正如您所说，JSF 是一个 HTML 生成器。在 JSF 规范中，您可以阅读 rowClasses 和 columClasses 的一般用途。在浏览器开发人员工具中，您可以看到它们的最终位置，并且所有内容都是 TD、TR 或 DIV 等……都只是 html。通过了解 css 选择器的工作原理、css 特性等，大多数情况下，使用浏览器开发工具可以轻松设置样式、右对齐或其他任何内容。
所以你的发展就像去汽车垃圾场一样，购买备件并期望能够建造法拉利而不是先去汽车学校或从电动肥皂盒开始？

标签： css jsf

【解决方案1】：

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

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

结果按钮显示在右侧。

【讨论】：

相关：stackoverflow.com/questions/12635007/…

【解决方案2】：

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

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

这不会做任何事情，因为内容被容器包围（注意 inline-block）。

第二个表格在一个包含填充的单元格内，然后是第二个表格的单元格的填充和.. 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 的开发工具，尤其是菜单项，你会发疯的，这很讨厌。

【讨论】：