The div element cannot be nested in the ul element

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): The div element cannot be nested inside the ul element.

But when I press F5, everything is fine. Now I work on localhost in Visual Studio 2013 (from the code side - C #) I want to ask if this could make a problem for my site in the future?

Answer 1

A warning is a warning. Your page is displayed correctly only because the browser is not too strict in the HTML rules, but this may change in the future. For this reason, you should try to maintain HTML compatibility and take warnings seriously. In this case, I would suggest replacing the <div> tags with <li> <div> tags and styling them to prevent fields and markers (I assume that you are 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 will 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

Typically, one would expect the ul element to contain the elements li . For li elements, it might make sense to contain a div , but it doesn't make much sense to have a div (or something else) as the immediate children of ul . Can you change the div to li s, maybe what you are looking for?

Answer 3

You can still use your div tag, you just need to wrap it in the 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 styles directly to the li element.