如何在 <h:panelGrid> 中对齐项目向右 [英] How to align items in a &lt;h:panelGrid&gt; to the right

查看：14
本文介绍了如何在 <h:panelGrid> 中对齐项目向右的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何将下方的所有内容与最右侧对齐?

<h:form id="身份验证"><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="密码"/><p:commandButton id="login" value="Login" align="right"/></h:panelGrid></h:form>

解决方案

呈现一个 HTML 表格.您基本上希望在它呈现的每个 <td> 元素上应用 text-align: right; .使用当前代码，最简单的方法是应用以下内容:

#authenticate table td {文本对齐:右；}

<小时>

您当然也可以更具体，例如给 <h:panelGrid> 自己的 styleClass 并在 CSS 中定义规则(将直接应用于呈现的 HTML

代码>元素).

与

.className td {文本对齐:右；}

<小时>

您还可以通过 columnClasses 属性为每个 <td> 元素赋予自己的类，该属性接受以逗号分隔的 CSS 类名字符串，这些类名将重复应用于

code> 元素.如果你想在每个 <td> 元素上应用相同的类，只需指定一次:

与

.className {文本对齐:右；}

<小时>

额外提示:在浏览器中右键单击网页并选择查看源代码，这样您就会更好地了解 JSF 究竟生成了什么.

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>

解决方案

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

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

with

.className td {
    text-align: right;
}

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

with

.className {
    text-align: right;
}

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

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆