Как выровнять элементы в <h: panelGrid> справа

Question

Как бы я выровнял все, что находится внизу, по правому краю?

<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> отображает таблицу HTML.В основном вы хотите применить text-align: right; к каждому <td> элементу, который он отображает.С текущим кодом проще всего было бы применить следующее:

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

---

Вы, конечно, также можете быть более конкретным, например, дать <h:panelGrid> свой собственный styleClass и определить правило вCSS (который будет применен непосредственно к отображаемому элементу HTML <table>).

<h:panelGrid styleClass="className">

с

.className td {
    text-align: right;
}

---

Вы также можете присвоить каждому элементу <td> свой собственныйКласс по атрибуту columnClasses, который принимает разделенную запятыми строку имен классов CSS, которые должны многократно применяться к элементам <td>.Если вы хотите применить один и тот же класс к каждому элементу <td>, просто укажите его один раз:

<h:panelGrid columnClasses="className">

с

.className {
    text-align: right;
}

---

В качестве дополнительной подсказки: щелкните правой кнопкой мыши веб-страницув веб-браузере и выберите Просмотр источника , тогда вы лучше поймете, что именно JSF генерирует.

Answer 2

на самом деле в той же форме, я использовал <p:panel> и получил хороший результат.выглядит как;

<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

Немного опоздал, но мог бы помочь кому-то, так как это было то, что мне было нужно ...

Если выравнивание не ограничено этой конкретной таблицей, а скорее форматом по умолчанию для всех ячеек таблицы, просто добавьте это в свой файл CSS:

td {
    text-align: right;
}

Тогда все элементы <td>, включая сгенерированные JSF, будут отформатированы таким образом.