国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

不確定欄目數(shù)量的（多行）導(dǎo)航欄居中

Baoyuan / 1280人閱讀

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


DEMO：http://www.tinghaige.com/demo/uncertain-nav/
代碼：
HTML代碼

注：使用這種詭異的結(jié)構(gòu)是為了消除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; //隱藏最左側(cè)元素的左邊框
    margin-bottom: 5px;
  }

JS代碼（Jquery）：

  var width_outer = $(".nav").width(); //導(dǎo)航最外層寬度
  var width_item = $(".nav_list li").width(); //每個欄目名稱（
  • ）的寬度
  var count = $(".nav_list li").length; //欄目數(shù)量
  var num = width_outer / width_item; //每行最大數(shù)量（可以按需調(diào)整）

  if(count < num) {
    $(".nav_list").width(count * width_item) //根據(jù)欄目數(shù)量和寬度設(shè)置`
      `的寬度
  } else {
    count = num;
    $(".nav_list").width(count * width_item)
  }

    • 確定了

      的寬度，可以使用margin:0 auto來實現(xiàn)整個
        的居中，在CSS中使用負邊距margin-left:-1px來隱藏最左側(cè)標簽的左邊框。

    文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/110926.html

    相關(guān)文章

    • 水平、垂直居中方式總結(jié)

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

      陸斌 評論0 收藏0

    • CSS居中那些事

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

      dingding199389 評論0 收藏0

    • 一個類似于京東Plus權(quán)益介紹的小功能

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

      acrazing 評論0 收藏0

    • 網(wǎng)頁導(dǎo)航欄 html + css的代碼實現(xiàn)

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

      keke 評論0 收藏0

    發(fā)表評論

    0條評論

    Baoyuan

    男|高級講師

    TA的文章

    閱讀更多
    最新活動
    閱讀需要支付1元查看
    <