Cách căn chỉnh các mục trong một <h:panelGrid> ở bên phải

Question

Làm cách nào để sắp xếp mọi thứ trong phần bên dưới của tôi ở bên phải?

<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

<h:panelGrid> hiển thị bảng HTML. Về cơ bản, bạn muốn áp dụng text-align: right; trên mọi phần tử <td> nó hiển thị. Với mã hiện tại, đơn giản nhất sẽ được áp dụng như sau:

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

---

Bạn có thể dĩ nhiên cũng được cụ thể hơn, ví dụ đưa ra <h:panelGrid> riêng của mình styleClass và xác định quy tắc trong CSS (sẽ được áp dụng trực tiếp trên phần tử HTML <table> được hiển thị).

<h:panelGrid styleClass="className"> 

với

.className td { 
    text-align: right; 
} 

---

Bạn cũng có thể cung cấp cho mỗi phần tử <td> lớp riêng của mình bằng cách columnClasses thuộc tính mà chấp nhận một chuỗi commaseparated của classnames CSS đó sẽ được áp dụng nhiều lần trên <td> yếu tố. Nếu bạn muốn áp dụng cùng lớp trên mọi phần tử <td>, chỉ cần xác định nó một lần:

<h:panelGrid columnClasses="className"> 

với

.className { 
    text-align: right; 
} 

---

Là một gợi ý thêm: click chuột phải các trang web trong webbrowser và chọn Xem Nguồn, sau đó bạn sẽ hiểu rõ hơn những gì JSF được tạo ra chính xác.

Answer 2

thực sự ở cùng một hình thức tôi đã sử dụng <p:panel> và có kết quả tốt. giống như ;

<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

Một chút muộn, nhưng có thể giúp đỡ một ai đó, vì nó là những gì tôi cần ...

Nếu sự liên kết không giới hạn bảng cụ thể này, nhưng đúng hơn là định dạng mặc định cho tất cả các ô bảng, sau đó chỉ cần thêm tệp này vào tệp CSS của bạn:

td { 
    text-align: right; 
} 

Sau đó, tất cả các phần tử được tạo bởi JSF sẽ được định dạng theo cách đó.