사용자 정의 가능 탐색/문제 해결

Question

HTML5 및 코딩 전반에 대한 완전한 초보자입니다. 저는 Zurb Foundation을 사용하여 프로토 타입을 작성했으며 내비게이션에 다음 코드를 사용했습니다. 텍스트 대신 크기가 축소되면 (예 : 브라우저 축소 또는 모바일에서 열기) 버튼이 표시되도록 작동합니다.

유일한 문제는 네비게이션이 왼쪽 상단의 왼쪽 로고와 같은 행에 배치되고 레이아웃이 서로 수평이되도록하는 것입니다. 현재 탐색 요소는 간단한 링크 텍스트로 서로 겹쳐져 있습니다. 스타일 시트 편집 가능한 특성입니까? 사용자 정의 할 수있는 탐색을 위해 어디서부터 시작해야하는지, 어떤 코드가 필요합니까? 기본적으로 모바일 버전 ul 클래스가 내 코드를 엉망으로 만들고 있습니까? (그것을 제거하면 전체 크기 버전에 어떤 차이도 나타나지 않습니다 ...) 정말 고마워요! 검색 결과가 아직 많이 나오지 않았습니다 ...

<div class="eight columns"> 
    <div id="navigation"> 
     <ul class="hide-on-phones"> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">Services</a></li> 
      <li><a href="#">For Sale</a></li> 
      <li><a href="#">Contact or Visit Us</a></li> 
     </ul> 
     <ul class="show-on-phones"> 
      <li><a href="#" class="large black button">Home</a></li> 
      <li><a href="#" class="large black button">Services</a></li> 
      <li><a href="#" class="large black button">For Sale</a></li> 
      <li><a href="#" class="large black button">Contact or Visit Us</a></li> 
     </ul> 
    </div> 
</div> 

Answer 1

문제는 스타일 "큰 검은 색 버튼"입니다. 이 스타일은 "모바일"해상도에서 전체 화면 너비를 확장하기위한 것입니다. 몇 줄의 CSS를 추가하여 요소와 같은 버튼을 직접 만들 수 있습니다. 어떻게 작동하는지 보여주는 jsFiddle에서 데모를 설정했습니다. jsFiddle에서 디바이더를 가져 와서 "모바일"중단 점에 도달 할 때까지 디스플레이를 축소하십시오.

링크 : http://jsfiddle.net/fumUp/1/

Code: 
    <!-- the inline style below should be moved to your CSS file --> 
    <style> 
     .mobile-nav a 
     { 
      border-radius:5px; 
      background-color:#000;  
      padding:5px 10px; 
     } 
     .mobile-nav li 
     { 
      float:left; 
      padding:5px; 
     } 
    </style> 
    <!-- /Inline style --> 
    <div class="row"><div class="eight columns"> 
      <div id="navigation"> 
       <ul class="hide-on-phones"> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">Services</a></li> 
       <li><a href="#">For Sale</a></li> 
       <li><a href="#">Contact or Visit Us</a></li> 
       </ul> 
       <ul class="mobile-nav show-on-phones"> 
       <li><a href="#" class="simple-radius">Home</a></li> 
       <li><a href="#" class="simple-radius">Services</a></li> 
       <li><a href="#" class="simple-radius">For Sale</a></li> 
       <li><a href="#" class="simple-radius">Contact or Visit Us</a></li> 
       </ul> 
       </div> 
      </div> 
    </div>​​​​​