元素'div'不能嵌套在元素'ul'内部。

Question

 <ul>
           <div style="float:left">
                   <asp:LinkButton ID="lbtnFirst" runat="server" CausesValidation="false" OnClick="lbtnFirst_Click">İlk</asp:LinkButton></div> 
           <div style="float:left"><asp:LinkButton ID="lbtnPrevious" runat="server" CausesValidation="false" OnClick="lbtnPrevious_Click"> << </asp:LinkButton></div>
</ul>

在我的Asp.net项目中，我收到了以下警告：

验证（XHTML 1.0 Transitional）：元素'div'不能嵌套在元素'ul'内。

但是当我点击F5时一切都很正常。 现在我正在使用Visual Studio 2013（代码方面是C＃）的localhost上工作。 我想问一下，这会在将来对我的站点造成问题吗？

- Jeyhun

---

你的页面即使有这个无效的标记也能正常显示，但是在ul标签内部直接放置一个div标签毫无意义。你想要实现什么效果呢？ - JLRishe

@JLRishe，我使用重复器控件创建了分页。项目运行正常，没有问题。 由于我的项目页面需要包含页码、第一页、上一页、下一页和最后一页，所以它们应该在 ul 中。 我使用 div 标签是因为需要使用 float:left 样式。 - Jeyhun

为什么不使用 li 元素呢？你可以对它们应用 float: left 样式。 - JLRishe

@JLRishe，我改了，谢谢。 - Jeyhun

Answer 1

警告只是一个警示。你的页面之所以能够正确显示，仅是因为浏览器对HTML规则不太严格，但这种情况可能在将来发生改变。因此，你应该努力保持HTML合规，并认真对待这些警告。在这种情况下，我建议你将

替换为

标签，并进行样式设置以防止出现边距和项目符号（我猜这就是你使用

而不是

的原因）。

要实现你想要的效果，请将以下CSS样式应用于你的列表：

.your-ul {
    list-style: none;
}

.your-ul li {
    position:relative;
    margin-left: 0;
    display: inline-block;
}

您的HTML/ASPX代码应该如下所示：

<ul class="your-ul">
    <li><asp:LinkButton ID="lbtnFirst" runat="server" CausesValidation="false" OnClick="lbtnFirst_Click">Ilk</asp:LinkButton></li> 
    <li><asp:LinkButton ID="lbtnPrevious" runat="server" CausesValidation="false" OnClick="lbtnPrevious_Click"> << </asp:LinkButton></li>
</ul>

- Prutswonder

Answer 2

您仍然可以使用

标签，只需将其包装在

元素中即可。

<ul>
<li>
    <div style="float:left">
        <asp:LinkButton ID="lbtnFirst" runat="server" CausesValidation="false" onClick="lbtnFirst_Click">İlk</asp:LinkButton>
    </div>
    <div style="float:left">
        <asp:LinkButton ID="lbtnPrevious" runat="server" CausesValidation="false" OnClick="lbtnPrevious_Click"> << </asp:LinkButton>
    </div>
</li>

尽管如其他人所说，您也可以直接将样式应用于li元素。

- Chris Owens

Answer 3

通常情况下，人们期望 ul 元素包含 li 元素。将 div 放在 li 元素中可能是有意义的，但是将 div（或其他任何东西）作为 ul 的直接子元素并没有太多意义。您可以将您的 div 更改为 li，也许这正是您要寻找的？

- OldGeeksGuide