간과 된 분리 된 요소

Question

현재 MVC를 학습하는 과정에서 HTML 코드를 간섭하고 있다고 생각합니다. 목록으로 기본 탐색 메뉴가 있고 두 개의 <li> 항목이 하나로 결합 된 것 같습니다. 두 가지가 서로 분리되어 있는지 확인하는 방법은 무엇입니까?

@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

id="> 부분에 인용 부호가 누락되었습니다. 이것은 유효한 html이 아니므로 wen 브라우저가 두 요소가 결합 된 해결 방법을 시도합니다. .

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

가 올바른 태그 속성 id="" 사용 :

그 대신에 해결하세요!

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