Кнопка в строке ах: panelGrid

Question

Я хочу, чтобы стиль все мои кнопки подряд на левом сайте моего входного поля:

Однако, на данный момент это выглядит так, потому что я использую styleClass="grid":

<h:panelGrid columns="2" columnClasses="label, value" styleClass="grid" 
    style="margin-bottom: 10px"> 

    <h:outputText value="#{templateItem.label}" 
     rendered="#{templateItem.displayType == 1}" /> 
    <p:inputText value="#{orderListBean.value}" 
     rendered="#{templateItem.displayType == 1}" required="false" 
     id="inputText"> 
    </p:inputText> 

    <!-- Command Buttons --> 
    <h:panelGrid columns="5" styleClass="grid" style="margin-bottom: 10px"> 
     <div> 
      <h:commandLink action="#{orderListBean.makeFirst(templateItem)}"> 
       <i class="icon-circle-arrow-up" /> 
      </h:commandLink> 
      <h:commandLink action="#{orderListBean.moveUp(templateItem)}"> 
       <i class="icon-arrow-up" /> 
      </h:commandLink> 
      <h:commandLink action="#{orderListBean.moveDown(templateItem)}"> 
       <i class="icon-arrow-down" /> 
      </h:commandLink> 
      <h:commandLink action="#{orderListBean.makeLast(templateItem)}"> 
       <i class="icon-circle-arrow-down" /> 
      </h:commandLink> 
      <h:commandLink action="#{orderListBean.deleteItem(templateItem)}"> 
       <i class="icon-remove" /> 
      </h:commandLink> 
     </div> 
    </h:panelGrid> 

</h:panelGrid> 

Любая идея, как переместить свои кнопки рядом с моим поле ввода? Я очень ценю ваш ответ !!!

Answer 1

Избавьтесь от тегов <div></div> внутри панели. Они классифицируются как элемент, поэтому занимают первый столбец. Вот почему ваш значок удаления появляется в следующей строке.

Также измените количество столбцов на первой панелиGrid на 3