Comment aligner des éléments dans un & ht; h: panelGrid & gt; à droite

Comment aurais-je aligner tout dans ma ci-dessous pour l'extrême droite?

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

source d'informationauteur curiousgeorge

  1. 25

    La <h:panelGrid> rend un tableau HTML. Fondamentalement, vous voulez appliquer text-align: right; sur chaque <td> élément qu'il affiche. Avec le code actuel, le plus simple serait d'appliquer la suivante:

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

    Vous pouvez bien sûr également être plus précis, par exemple donner à la <h:panelGrid> son propre styleClass et la définition d'une règle CSS (ce qui serait appliqué directement sur le rendu HTML <table> élément).

    <h:panelGrid styleClass="className">

    avec

    .className td {
    text-align: right;
}

    Vous pouvez également donner à chaque <td> élément de sa propre classe par columnClasses attribut qui accepte un commaseparated chaîne de noms de classe CSS qui sont appliqués à répétition sur le <td> éléments. Si vous souhaitez appliquer la même classe sur tous les <td> élément, il suffit de le préciser une fois:

    <h:panelGrid columnClasses="className">

    avec

    .className {
    text-align: right;
}

    Comme un supplément conseil: cliquez avec le bouton droit de la page web dans le navigateur internet et choisir l'Affichage de la Sourcealors vous comprendrez mieux ce que JSF est tous exactement de la génération.

  2. 5

    en fait dans la même forme, j'ai utilisé <p:panel> et a obtenu un bon résultat. ressemble ;

    <p:panel  styleClass="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all">
    <p:commandButton value="Add New Tab"
            actionListener="#{xxx.createNewTab}" process="@this"
            update="tabView" style="float:right !important;margin:0px 0px 3px 0px;" />
            </p:panel>
  3. 0

    Un peu tard, mais peut aider quelqu'un, que c'était ce dont j'avais besoin...

    Si l'alignement n'est pas limitée à une table spécifique, mais plutôt le format par défaut pour toutes les cellules d'un tableau, puis il suffit d'ajouter ceci à votre fichier CSS:

    td {
    text-align: right;
}

    Ensuite, tous les <td> éléments, y compris ceux générés par JSF, sera formaté de cette manière.