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>一個<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;。