HTML验证错误:表单是ul的子元素

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>放在<ul>里面的<li>里面，而不是直接放在<ul>下面。

<li>元素是<ul>元素的有效子元素，<form>元素是<li>元素的有效子元素，因为它算作流内容。

你可以在MDN上找到更多关于<ul>和有效内容的信息，在MDN上找到更多关于<li>和有效内容的信息。

---

最终的<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;。