항목 수 를 알 수 없 는 (여러 줄) 탐색 표시 줄 가운데

1757 단어 css
DEMO:http://www.tinghaige.com/demo/uncertain-nav/ 코드: HTML 코드
    

주: 이런 기괴 한 구 조 를 사용 하 는 것 은 inline - block 의 간격 을 없 애기 위해 서 입 니 다.CSS 코드:
  .nav {
    width: 800px;
    margin: 0 auto;
    background: #fff;
    padding: 10px;
    border: 1px solid #000;
  }
  .nav_list {
    overflow: hidden;
    margin: 0 auto;
    height: auto;
    text-align: center;
  }
  .nav_list li {
    display: inline-block;
    border-left: 1px solid #000;
    width: 100px;
    background: #fff;
    text-align: center;
    margin-left: -1px; //           
    margin-bottom: 5px;
  }

JS 코드 (Jquery):
  var width_outer = $(".nav").width(); //       
  var width_item = $(".nav_list li").width(); //      (
  • ) var count = $(".nav_list li").length; // var num = width_outer / width_item; // ( ) if(count < num) { $(".nav_list").width(count * width_item) // `
      ` } else { count = num; $(".nav_list").width(count * width_item) }
  • 의 폭 을 확 정 했 습 니 다. margin:0 auto 을 사용 하여 전체 의 중앙 을 실현 할 수 있 습 니 다. CSS 에 서 는 네 거 티 브 여백 margin-left:-1px 을 사용 하여 맨 왼쪽 탭 의 왼쪽 테 두 리 를 숨 길 수 있 습 니 다.

    좋은 웹페이지 즐겨찾기