2011-12-16 2 views
1

HTML 깔끔한 소스를 출력하고 최종 인코딩 검사로 HTML Tidy를 사용하고 있습니다. HTML 깔끔한 요소 추가 방지

그러나이 같은 매우 간단한 목록을 가지고있다 :

<ul id="navigation"> 
      <a href="index.php"><li>Summary</li></a> 
      <a href="#"><li>Upload</li></a> 
      <a href="accounts.php"><li>Accounts</li></a> 
     </ul> 

이 괴물로 변환 :

<ul id="navigation"> 
     <li style="list-style: none"> 
      <a href="index.php"></a> 
     </li> 
     <li id="active">Summary 
     </li> 

     <li style="list-style: none"> 
      <a href="#"></a> 
     </li> 
     <li>Upload 
     </li> 
     <li style="list-style: none"> 
      <a href="accounts.php"></a> 
     </li> 
     <li>Accounts 
     </li> 

     </ul> 

어떻게 정상적으로 혼자 내 목록에서 탈퇴를 알 수 있습니까?

나는 configuration options을 검색했습니다. 그러나 직관적으로 이름이 지정되지 않았거나 제대로 설명되지 않았습니다.

답변

1

유일한 대답은 : 그것을 시작하는 유효한 마크 업을 제공합니다. ul의 유일한 합법적 인 하위 요소는 li입니다. a 요소는 ul의 하위 항목 일 수 없습니다.

<ul id="navigation"> 
    <li><a href="index.php">Summary</a></li> 
    <li><a href="#">Upload</a></li> 
    <li><a href="accounts.php">Accounts</a></li> 
</ul> 

당신은 전체 li은 클릭, 스타일이 될하려는 경우 a 요소 display: block 등 :

<li><a href="index.php">Summary</a></li> 
2

표준을 준수하도록 마크 업을 실제로 수정하려고 시도하면 <li> 태그는 <a> 태그 주위에 있어야합니다. 그 반대의 경우가 아닙니다. 수정하면 여분의 항목을 추가하지 않습니다. 목록에.

당신은 당신의 CSS를 가지고 수정,하지만 스타일 부분을 제거 할 수 있습니다

ul.navigation li 
{ 
    list-style: none; 
} 
+0

스팟을 켜십시오 ... 깔끔한 코드는 단지 그것이 어땠 을까하고하고 있습니다. –

+0

나는 이것을 깨달았지만이 파일로 검증하는 것에 대해 걱정할 필요가 없다. 나는 단순히 전체 li을 클릭 할 수있게 만들고 싶다. 그리고 이것을 렌더링 할 수없는 브라우저를 만나지 않았다. 또한 나는 이미'list-style : none;'을 내 CSS에 선언한다. –

+0

브라우저는 잘못된 마크 업을 처리하려고하기 때문에 렌더링 할 수있다. 링크가 견고해야 할 경우'display : inline-block'을 사용하도록 설정할 수 있습니다. 올바르게 이해하면 원하는 것을 수행해야합니다. –

0
<li> -s로 <a> 태그를 이동

잘못된 마크 업; ul 요소는 li 요소 만 포함 할 수 있습니다. Tidy는 실제로 그러한 깨진 마크 업을 고치는 데 가장 현명한 일반적인 접근법을 적용하고 있습니다. 즉, li이 아닌 모든 내용을 목록 bullter가 표시되지 않는 li 요소로 바꿉니다.

그래서 수동으로 당신이 원하는 아마 인

<li><a href="index.php">Summary</a></li> 

<a href="index.php"><li>Summary</li></a> 

같은 마크 업을 변경합니다. 현재 마크 업을 예상하는 경우 CSS 또는 JavaScript 코드를 변경해야 할 수 있습니다.

1

귀하의 목록은 다음과 같습니다

#navigation li a { 
    display: block; 
}