如何正確對齊兩個primefaces-elements？

Question

我使用primefaces

<p:toolbar style="margin:20px 0px"> 
    <f:facet name="left"> 
     <p:outputLabel value="#{loginBean.fullname}" /> 
    </f:facet> 

    <f:facet name="right"> 
     <p:inputText style="margin-right:10px" placeholder="Search" disabled="true"/> 
     <p:themeSwitcher effectSpeed="normal" effect="fade" style="width:165px; margin-right:10px;" id="defaultSwitcher" value="#{themeSwitcherBean.theme}"> 
      <f:selectItem itemLabel="Choose Theme" itemValue="" /> 
      <f:selectItems value="#{themeSwitcherBean.themes}" /> 
      <p:ajax global="false" listener="#{themeSwitcherBean.saveTheme}" /> 
     </p:themeSwitcher> 
     <p:commandButton action="#{loginBean.logout}" title="Log Out" style="width:36px; height:20px" icon="ui-icon-power" value="" ajax="false"></p:commandButton> 
    </f:facet> 
</p:toolbar> 

菜單欄這使得右側

它打擾我的眼睛是來回MTHE搜索框，下拉框對齊是不在同一高度。

你知道我可以如何正確對齊它們嗎？

Answer 1

您需要使用CSS修復下拉框外觀。嘗試將「margin-top」或「padding-top」屬性添加到p：themeSwitcher風格的arrtibute中。