不確定欄目數量的（多行）導航欄居中

Baoyuan 發布于2019-08-28 17:58 / 1279人閱讀

摘要：代碼隱藏最左側元素的左邊框代碼導航最外層寬度每個欄目名稱的寬度欄目數量每行最大數量可以按需調整根據欄目數量和寬度設置的寬度確定了的寬度，可以使用來實現整個的居中，在中使用負邊距來隱藏最左側標簽的左邊框。

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

margin-left:-1px

GPU云服務器云服務器 html的導航欄欄目文章數量不確定數據多少的類 html標題欄居中

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/110926.html

水平、垂直居中方式總結

摘要：我們在實際工作中經常會遇到需要水平居中或者垂直居中的場景，今天我們就來看一下如何設置水平居中和垂直居中。水平居中行內元素。不定寬塊狀元素水平居中我們來學習一下這種方法。我們在實際工作中經常會遇到需要水平居中或者垂直居中的場景，今天我們就來看一下如何設置水平居中和垂直居中。水平居中行內元素。如果被設置元素為文本、圖片等行內元素時，水平居中是通過給父元素設置text-align:c...

陸斌 2019-08-30 12:49 評論0 收藏0
CSS居中那些事

摘要：定寬塊狀元素滿足定寬和塊狀兩個條件的元素是可以通過設置左右值為來實現居中的。設置方法改變塊級元素的為類型設置為行內元素顯示，然后使用來實現居中效果。做前端這一年多來，其實一直都是偏向于js前后端，css什么的總是抱著夠用就好的心態，從來沒有系統的學習或總結過，結果現在的水平也一直停留在夠用的階段。感覺作為一名合格的前端工程師，不能讓css成為自己的短板，于是簡單的總結一下，高手繞路。...

dingding199389 2019-08-30 13:13 評論0 收藏0
一個類似于京東Plus權益介紹的小功能

摘要：最近公司要開發一套線上付費的會員，是和原生一起混合式的開發，有一個會員權益模塊是全部使用開發，想給大家看下需要做成的案例其實沒什么難點，主要就是功能有頂部導航欄可以左右滑動，點擊某一個欄目按鈕內容跟著切換并且加載一次之后，第二次就重新加載被最近公司要開發一套線上付費的會員App，是和原生一起混合式的開發，有一個會員權益模塊是全部使用H5開發，想給大家看下需要做成的案例： showIm...

acrazing 2019-08-26 13:36 評論0 收藏0
網頁導航欄 html + css的代碼實現

摘要：一般來講，我們的網頁導航欄是這么個模式來構建在結構上首先我們需要給導航欄的給個類名一般為然后就是一個無序表格由于導航欄的文字一般都是鏈接用來跳轉頁面要在里面包含一個首頁云云商城智慧門店營銷平臺媒體聯盟關于云道在樣式上目前我見過的分為兩種導航一般來講，我們的網頁導航欄是這么個模式來構建在結構上：1.首先我們需要給導航欄的div 給個類名一般為nav2.然后就是一個無序表格?3.由于導航欄的文...

keke 2019-04-23 11:55 評論0 收藏0