Question

我想在我的导航栏中放置一个表单，因此编写了以下HTML代码

<div id="navbar" class="collapse navbar-collapse">
    <div class="navbar-inner">
        <ul class="nav navbar-nav">
            <li class="active">
            <li><a href="/"><span class="glyphicon glyphicon-home" aria-hidden="true"></span></a></li>
            <li><a href="#">item 1</a></li>
            <li><a href="#">item 2</a></li>
        </ul>
        <ul class="top_navbar_center">
             <form action="/target" method='GET' style="display:inline;top-margin:5px;padding:5px;">
                  {{ form_search.hidden_tag() }}
                  {{ form_search.search() }}
                  <input type=hidden id="user_id" name="user_id">
              </form> 
        </ul>
    </div>
</div>

然而，我的html验证器告诉我这是无效的语法

Error: Element form not allowed as child of element ul in this context.

所以我的问题是如何在导航栏中正确包含表单？谢谢卡尔

Answer 1

您应该将<form>放在<li>内部的<ul>内，而不是直接放在<ul>下。

<li>元素是<ul>元素的有效子元素，<form>元素是<li>的有效子元素，因为它计为flow content

您可以找到有关<ul>和有效内容on MDN here的更多信息，以及有关<li>和有效内容on MDN here的信息。

您的最终<ul>将如下所示：

<ul class="top_navbar_center">
      <li>
          <form action="/target" method='GET' style="display:inline;top-margin:5px;padding:5px;">
              {{ form_search.hidden_tag() }}
              {{ form_search.search() }}
              <input type=hidden id="user_id" name="user_id">
          </form> 
      </li>
</ul>

如果要删除项目符号点，可以始终在CSS中使用list-style-type: none;。

html验证错误：表单为ul的子级

1 个答案: