css - ah: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>面板内的标签。它们被归类为一个元素，因此占据了第一列。这就是为什么您的删除图标出现在下一行

还将第一个 panelGrid 中的列数更改为 3