Wie Objekte in einem <h:panelGrid> nach rechts ausrichten

Question

Wie würde ich alles in meinem unten ganz rechts ausrichten?

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

Answer 1

Die <h:panelGrid> macht eine HTML-Tabelle. Sie möchten grundsätzlich text-align: right; auf jedes <td> Element anwenden, das es darstellt.

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

---

Sie können natürlich auch Genauer gesagt, zum Beispiel: Mit dem aktuellen Code, am einfachsten die folgenden anzuwenden wäre Geben Sie <h:panelGrid> eine eigene styleClass und definieren Sie eine Regel in CSS (die direkt auf das gerenderte HTML <table> Element angewendet werden würde).

<h:panelGrid styleClass="className"> 

mit

.className td { 
    text-align: right; 
} 

---

können Sie auch geben jedem <td> Element eine eigene Klasse von columnClasses Attribut, das eine commaseparated Reihe von CSS Klassennamen akzeptiert, die immer wieder auf den <td> Elemente angewendet werden sollen. Wenn Sie die gleiche Klasse auf jedem <td> Element angewendet werden soll, ist es nur einmal angeben:

<h:panelGrid columnClasses="className"> 

mit

.className { 
    text-align: right; 
} 

---

Als Extra-Tipp: Rechtsklick die Webseite in Web-Browser und wählen anzeigen Quelle, dann werden Sie besser verstehen, was genau JSF erzeugt.

Answer 2

tatsächlich in der gleichen Form ich benutzte <p:panel> und bekam gutes Ergebnis. sieht aus wie ;

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

Answer 3

ein wenig spät, aber vielleicht jemand helfen, wie es war, was ich brauchte ...

Wenn die Ausrichtung nicht auf diese spezielle Tabelle beschränkt ist, sondern das Standardformat für alle Tabellenzellen, dann fügen Sie einfach diese Datei auf Ihrem CSS:

td { 
    text-align: right; 
} 

dann werden alle <td> Elemente, von JSF diejenigen erzeugt, einschließlich, wird auf diese Weise formatiert werden.