在h:panelGrid中连续按钮

时间:2013-06-10 13:54:38

标签: css jsf primefaces

我想在输入字段的左侧网站上连续设置所有按钮的样式:

然而,目前它看起来像那样,因为我使用styleClass="grid"

enter image description here

<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>

知道如何在输入字段旁边移动我的按钮吗? 我非常感谢你的回答!

1 个答案:

答案 0 :(得分:1)

摆脱面板中的<div></div>标签。它们被归类为元素,因此占据了第一列。这就是为什么你的删除图标出现在下一行

的原因

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