Getrennte Elemente übersehen, jetzt kombiniert

Question

Derzeit im Prozess des Lernens von MVC und ich denke, es stört HTML-Code. Ich habe nur ein einfaches Navigationsmenü als Liste und zwei <li> Elemente scheinen zu einem zu kombinieren. Kann man sicherstellen, dass die beiden getrennt leben?

@if ((Request.Url.AbsolutePath.ToString().ToLower() != "/home/index") && (Request.Url.AbsolutePath.ToString() != "/")) 
{ 
    <nav data-spy="affix" data-offset-top="500" style="border-radius:0px; left: 0" ng-hide="sideBar" id="nav"> 
     <img src="~/Content/images/open.png" ng-model="sideBar" id="sideBarOpen" style="left:0px; top:0;"/> 
     <div id="sideBar" style="left: -200px"> 
      <ul> 
       <li><a href="@Url.Action("Index", "Home")" id="navHeader"> Home </a></li> 
       <li><br /></li> 
       <li><a href="@Url.Action("AboutMe", "Home")" id="">About Me</a></li> 
############# 
       <li><a href="@Url.Action("Experience", "Home")" id=">Experience</a></li> 
       <li><a href="@Url.Action("Resume", "Home")" id="">Resume</a></li> 

############ These two seem to be recognized as 1 <li> and not two. 

       <li><a href="@Url.Action("Contact", "Home")" id="">Contact</a></li> 
      </ul> 
      <img src="/Content/images/myPic.jpg" /> 
       </div> 
    </nav> 
    <div id="sideBarBack" style="width:0%;"> 
    </div> 
} 

Answer 1

Ihnen fehlt ein Anführungszeichen im id="> Teil. Dies ist kein gültiger HTML-Code, daher versucht Ihr Browser eine Umgehung, die zu einer Kombination der beiden Elemente führt.

Um dies zu beheben statt:

<li><a href="@Url.Action("Experience", "Home")" id=">Experience</a></li> 

ein Attribut richtigen Tag verwenden id="":.!

<li><a href="@Url.Action("Experience", "Home")" id="">Experience</a></li>