css - 按钮在一行中 h :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