javascript - 当图像在同一行时 commandLink 不工作

Question

这是我的代码。我在面板网格内有两个图像，这两个图像放置在动画 Javascript 渐变之上。当左侧图像与右侧的注销图标平行放置时(如图所示)，注销功能不起作用。当我删除左侧图像时，注销功能正在运行。请为此问题提供解决方案。

<h:panelGrid columns="2"  styleClass="topVerticalAlign" style="width: 100%;background: -webkit-linear-gradient(top left, #99D6FF 0%, #9E5EDF 100%);">                
    <p:graphicImage value="/resources/images/zDVI-TPF_Logo.png" height="50" width="150" />             
    <h:panelGrid columns="2" style="text-align: right; float: right">
        <p:graphicImage value="/resources/images/user.png" height="25px" width="25px" />  
        <p:outputLabel value="Welcome,  #{userBean.username}"/>
        <h:outputText value=""/>
        <p:commandLink  action="#{userController.doLogout}">                         
            <p:graphicImage id="logoutIcon" value="/resources/images/logout.png" height="25px" width="25px" />                        
            <p:tooltip for="logoutIcon" style="font-weight: bold" value="Logout" showEffect="clip"  />
        </p:commandLink>
    </h:panelGrid>
</h:panelGrid>

Answer 1

一个建议。不要将 panelGrid 用于视觉容器。我在这里看到 Primefaces，所以我强烈建议使用 p:outputPanel layout="block"(呈现为 DIV)来处理 JS 渐变之类的东西。 graphicImage 和 commandLink 容器也是如此。

<p:outputPanel id="gradientDiv" style="position: relative; ...
    <p:outputPanel id="logoWrapper" style="position: absolute; ...
        ...logo contents
    <p:outputPanel id="userMenuWrapper" style="position: absolute; ...
        ...user menu contents