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

In my Asp.net project I get this Warning :

Validation (XHTML 1.0 Transitional): Element 'div' cannot be nested within element 'ul'.

But when I click F5 everthing woks great. Now I am working on localhost in Visual Studio 2013 (Code side is C#) I want to ask can this make problem for my site in future ?

Answer 1

The warning is, well, a warning. Your page is displayed correctly only because the browser is not too strict on the HTML rules, but that may change in the future. For that reason, you should try to keep your HTML compliant and take the warnings seriously. In this case, I would suggest to replace the <div> with <li> tags and style them to prevent the margins and bullets (I assume that's why you're using <div> instead of <li> in the first place).

To achieve what you want, apply this CSS style to your list:

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

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

Your HTML/ASPX code would look like this:

<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

Normally one would expect a ul element to contain li elements. It may make sense for the li elements to contain div s but it doesn't make a lot of sense to have div s (or anything else) as immediate children of a ul . You could change your div s to li s, perhaps that's what you're looking for?

Answer 3

You can still use your div tag, it just needs to be wrapped in a li element.

<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>

Although, as others have said, you can also just apply the styles directly to li element.