元素'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中的localhost（代码端是C＃）我想问这可能会在将来为我的网站带来问题吗？

Answer 1

警告是一个警告。您的页面显示正确只是因为浏览器对HTML规则不是太严格，但将来可能会更改。因此，您应该尝试保持HTML兼容并严肃对待警告。在这种情况下，我建议用<div>标签替换<li>并设置它们以防止边缘和子弹（我假设这就是为什么你首先使用<div>而不是<li>）。

要实现您的目标，请将此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>

Answer 2

通常人们会期望ul元素包含li元素。 li元素包含divs可能是有道理的，但将divs（或其他任何东西）作为ul的直接子项并没有多大意义。你可以把你的divs改成lis，也许这就是你要找的东西？

Answer 3

您仍然可以使用div标签，它只需要包含在li元素中。

<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元素。