2014-12-20 2 views
2

작은 화면 (< 720px)에는 멋진 글꼴 아이콘이있는 토글 메뉴가 있습니다.글꼴이 멋진 버거 메뉴 옆에 점이 표시됩니다.

어제 메뉴 이전에 전체 중지가 나타났습니다. 나는 이것이 어디에서오고 있는지 알 수 없다.

문제의 점.

enter image description here

에게 메뉴에 대한 코드는 (개발자 도구에서 가져온.)

<ul id="toggle-menu"> 
    <li class="pullDown"> 
     <a href="#" id="pull"> 
      <i class="fa fa-bars fa-3x "></i> 
     </a> 
    </li> 
</ul> 

그것을가 리 내의 모든 요소가 삭제되는 경우에도,이 라인 내에서 DOM에 등장 .

<li class="pullDown"></li> 

이 사이트는 전체 코드가에 대한 here를 참조 코드를

#toggle-menu li { 
    float: right; 
    list-style-type: none; 
} 

를 추가하려면있는 style.css에서 미리

답변

5

에서 here

감사하다 here

입니다 행동 중의 예.

도트가있는 이유는 목록 요소로 추가한다는 것입니다. 즉, 전체 요소가 아니며 필연적으로 정렬되지 않은 목록의 새 요소에 대한 마커 일뿐입니다. list-style-type:none은 목록 요소에 대한 스타일을 제거합니다.

+0

스팟, 감사 같은 것을 포함해야합니다. 이것이 Normalize.css를 제거한 결과입니다. – tonyedwardspz

1

전체 중지가 아니며 목록 항목입니다. <li> 태그가있는 목록을 사용하고 있으며 기본 동작은 무엇이든지 안에 앞에 글 머리 기호를 넣는 것입니다. <li>

실제 답변은 사용자의 코드가 의미 상 정확하지 않다는 것입니다. 왜 순서가 정렬되지 않은 목록 안의 아이콘입니까? 두 가지 다른 옵션을 ... 고려

1) 그냥 퍼팅 <a> 순자산 가치 (NAV)의 전면에 아이콘을 포함하고 이 그것을 떠나)가에있는 글꼴 멋진 아이콘을 통합 : 이전 또는 다음의 사이비 요소 후 CSS 스타일을 사용하여 메뉴 자체를 탐색하십시오. CSS를 통해 아이콘을 추가하는 방법에 대한 정보는 멋진 글꼴 사이트에서 찾을 수 있습니다.

+0

의미론에 좋은 점. 간단하게 변경해 보겠습니다. tonyedwardspz

0

귀하의 토글 메뉴 클래스에

list-style: none; 
관련 문제