如何对齐< h：panelGrid>中的项目在右边 [英] How to align items in a <h:panelGrid> to the right

问题描述

如何将下面的所有内容对齐到最右边？

How would I align everything in my below to the far right?

<div id="container">    
     <h:form id="authenticate">
        <h:panelGrid columns="5" cellpadding="6">
             <h:inputText id="email" value="" />
             <p:watermark for="email" value="Email"/>
             <h:inputSecret id="password" value="" />
             <p:watermark for="password" value="Password"/>
             <p:commandButton id="login" value="Login" align="right"/>
        </h:panelGrid>
     </h:form>
</div>

推荐答案

< h：panelGrid& / code> 呈现HTML表格。你基本上想要在它呈现的每个< td> 上应用 text-align：right; 使用当前代码，最简单的是应用以下：

The <h:panelGrid> renders a HTML table. You basically want to apply text-align: right; on every <td> element it renders. With the current code, easiest would be to apply the following:

#authenticate table td {
    text-align: right;
}

---

更具体地，例如给< h：panelGrid> 自己的 styleClass ，并在CSS中定义一个规则呈现的HTML < table> 元素）。

---

You can of course also be more specific, e.g. giving the <h:panelGrid> its own styleClass and defining a rule in CSS (which would be applied directly on the rendered HTML <table> element).

<h:panelGrid styleClass="className">

.className td {
    text-align: right;
}

---

< td> 元素其自身的类由 columnClasses 属性，接受要应用的CSS类名的commaseparated字符串重复对< td> 元素。如果您要对每个< td> 元素应用相同的类，只需指定一次：

---

You can also give each <td> element its own class by columnClasses attribute which accepts a commaseparated string of CSS classnames which are to be applied repeatedly on the <td> elements. If you want to apply the same class on every <td> element, just specify it once:

<h:panelGrid columnClasses="className">

.className {
    text-align: right;
}

---

右键点击网络浏览器中的网页，然后选择查看源代码，那么您将更好地了解JSF正在生成的内容。

---

As an extra hint: rightclick the webpage in webbrowser and choose View Source, then you'll understand better what JSF is all exactly generating.

这篇关于如何对齐< h：panelGrid>中的项目在右边的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！