Div不能嵌套在ul里面，li也不能嵌套在div里面

In the below code i have a div inside a ul tag for making collapasable dropdown.But it throws div cannot be nested inside ul and li cannot be nested inside div.Pls help me to solve the issue.

在下面的代码我有一个div内的ul标签,用于制作可折叠的dropdown。但是它抛出div不能嵌套在ul里面而且li不能嵌套在div里面.Pls帮助我解决问题。

<li visible="false" runat="server" id="liMasters">
 <ul>
  <li class="heading accounts">
  <asp:Label ID="lblMasters" Visible="false" runat="server"></asp:Label></li>
   <div class="menu-item">
    <li>
      <div class="nav-item" id="SalesPrice" visible="false" runat="server">
          <a href="/Hoard/SalesPrice.aspx" id="SalesPriceUL">
          <asp:Label ID="lblSalesPrice" runat="server"></asp:Label></a>
      </div>
    </li>
   </div>
 </ul>
</li>

5 个解决方案

#1

An unordered or ordered list, starting with <ul> tag can only contain list items (<li> tags). The <li> tags itself can contain different elements again eg. <a> tags.

从

标记)。
标签本身可以再次包含不同的元素,例如。标签。

See http://www.w3.org/TR/html5/grouping-content.html#the-ul-element for more details.

有关详细信息,请参阅http://www.w3.org/TR/html5/grouping-content.html#the-ul-element。

#2

HTML <ul> Tag Definition and Usage
The tag defines an unordered (bulleted) list.
Use the <ul> tag together with the <li> tag to create unordered lists.

HTML

标记定义和用法标记定义了无序(项目符号)列表。将
标记与
标记一起使用以创建无序列表。

Reference from w3schools

来自w3schools的参考

If you wish, you could insert your <div> tags inside the <li> tags, that will be fine.

如果您愿意,可以在

标签内插入

标签,这样就可以了。

#3

Make the li to be display: block instead and it will act like a <div>. Then do all sorts of stuff.

使li显示:阻塞,它将像

一样。然后做各种各样的事情。

<li visible="false" runat="server" id="liMasters">
  <ul>
    <li class="heading accounts">
      <asp:Label ID="lblMasters" Visible="false" runat="server"></asp:Label>
    </li>
      <li style="display: block" class="menu-item">
        <div class="nav-item" id="SalesPrice" visible="false" runat="server">
          <a href="/Hoard/SalesPrice.aspx" id="SalesPriceUL">
            <asp:Label ID="lblSalesPrice" runat="server"></asp:Label>
          </a>
        </div>
      </li>
  </ul>
</li>

#4

Here's a reasonable solution:

这是一个合理的解决方案:

<li visible="false" runat="server" id="litMasters">
  <ul>
    <li class="heading accounts">
      <asp:Literal ID="litMasters" Visible="false" runat="server"></asp:Literal>
    </li>
    <li class="menu-item nav-item">
      <a href="/Hoard/SalesPrice.aspx" id="SalesPriceUL">
        <asp:Literal ID="litSalesPrice" runat="server"></asp:Literal>
      </a>
    </li>
  </ul>
</li>

All the labels are changed to literals.

所有标签都更改为文字。

#5

Change your doctype to either

将您的doctype更改为

<!doctype html>

for HTML5 which has wide support for nesting block element inside inline elements

对于HTML5,它广泛支持嵌入式元素内嵌元素

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

For HTML4 and below.

适用于HTML4及以下版本。

Nesting divs in li, ul and dl is allowed in at least HTML5.

至少在HTML5中允许在li,ul和dl中嵌套div。

#1