我想在输入字段的左侧网站上连续设置所有按钮的样式:
然而,目前它看起来像那样,因为我使用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>
知道如何在输入字段旁边移动我的按钮吗? 我非常感谢你的回答!
答案 0 :(得分:1)
摆脱面板中的<div></div>
标签。它们被归类为元素,因此占据了第一列。这就是为什么你的删除图标出现在下一行
同时将第一个panelGrid中的列数更改为3