<h:form> 内 <li> 影响布局显示答案

【问题标题】：<h:form> inside <li> affecting layout display<h:form> 内 <li> 影响布局显示
【发布时间】：2014-09-02 17:09:03
【问题描述】：

我正在使用带有 JSF primefaces 的引导模板。

这是基于我的默认引导模板的。

这是我在调用 staffBean.logoutStaff() 方法的 jsf:action 中添加后的 .xhtml 代码。我的页面加载时出现“此链接已禁用，因为它没有嵌套在 jsf 表单中”错误。因此，按照我在stackoverflow中找到的解决方案的建议，我在注销部分添加了一个标签。

index.xhtml

 <div class="dropdown profile-element"> <span>
                                    <h:graphicImage class="img-circle" library="images" name="profile_small.jpg" />
                                </span>
                                <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                                    <span class="clear"> <span class="block m-t-xs"> <strong class="font-bold">#{staffBean.staff.firstName}</strong>
                                        </span> <span class="text-muted text-xs block">#{staffBean.staff.userType} <b class="caret"></b></span> </span> </a>
                                <ul class="dropdown-menu animated fadeInRight m-t-xs">
                                    <li><a href="profile.html">Profile</a></li>
                                    <li><a href="contacts.html">Contacts</a></li>
                                    <li><a href="mailbox.html">Mailbox</a></li>
                                    <li class="divider"></li>
                                    <li><h:form><a href="logout.xhtml" jsf:action="#{staffBean.logoutStaff()}">Logout</a></h:form></li>
                                </ul>
                            </div>

加入标签后，我的登出代码就可以正常运行了。但是，h:form 标签导致我的布局发生了一些奇怪的变化。变化如下。与上面的 3 个组件相比，注销部分似乎更轻。

知道可能是什么问题吗？它与 hform 标签有关吗？

【问题讨论】：

既然这只是前端，为什么不使用 firebug 或任何浏览器工具并检查元素。你可能有冲突的 css。

标签： twitter-bootstrap jsf jsf-2 primefaces

【解决方案1】：

我设法解决了这个问题。

我把标签放在 li 标签外面。

 <div class="dropdown profile-element">
                                <h:form>

                                    <span>
                                        <h:graphicImage class="img-circle" library="images" name="profile_small.jpg" />
                                    </span>
                                    <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                                        <span class="clear"> <span class="block m-t-xs"> <strong class="font-bold">#{staffBean.staff.firstName}</strong>
                                            </span> <span class="text-muted text-xs block">#{staffBean.staff.userType} <b class="caret"></b></span> </span> </a>
                                    <ul class="dropdown-menu animated fadeInRight m-t-xs">
                                        <li><a href="profile.html">Profile</a></li>
                                        <li><a href="contacts.html">Contacts</a></li>
                                        <li><a href="mailbox.html">Mailbox</a></li>
                                        <li class="divider"></li>
                                        <li><a href="logout.xhtml" jsf:action="#{staffBean.logoutStaff()}">Logout</a></li>
                                    </ul>

                                </h:form>
                            </div>

【讨论】：