Element 'div' cannot be nested within element '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 ?

Judicious

Your page will render even with this invalid markup, but it makes absolutely no sense to have a div immediately inside a ul. What are you trying to accomplish with this? – Rouen

@Rouen ,I create pagination with repeater control. Project works, no problem. As my project pages numbers, firstpage, previous page, next page, last page should be inside ul. I write div because of float:left style. – Judicious

Why aren't you using lis? You can apply float: left to them. – Rouen

@Rouen , I changed, thanks. – Judicious

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>

Callen

Answer 2

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.

Jewbaiting

Answer 3

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

Margravine