为了账号安全,请及时绑定邮箱和手机立即绑定

为什么 .nav-tabs.nav-justified > li { display: table-cell; width: 1%; }

.nav-tabs.nav-justified > li { display: table-cell; width: 1%;  }   width:1%;为什么?

正在回答

3 回答

我也觉得很奇怪为什么是1%,于是今天实验了一下,其实width不必是1%,这个值取决于你cell里内容的长度。举个例子,如果cell里输入‘one’,在chrome中其长度是27个像素,我设置包裹它的div的长度是1000px,那么width的值就可以设置为100/(1000/27)约为2.7%,那么小于2.7%的值都会使cell完整的填充div且cell的长度相等,一般都不会小于1%,所以这个宽度就有它的道理了。由于没有chrome的源码,无从知道table cell宽度的算法,但我通过实验得到了一个可信的算法:我在div中输出了10个‘one’,当width小于10%大于2.7%的时候比较简单,不会填满div,最右边有空白区域,其大小直接用减法即可得到,不多说。当width大于10%的时候最右一个cell宽度坍塌,中间的cell长度也是不等的,其算法为

  1. 计算出可以放多少个cell,比如width=15%,可以放6.666666...个‘one’,可是我要放10个

  2. 于是要保证有3个one是最小的宽度:27px,最右边的3个one就是了

  3. 剩余的宽度:1000-27*3=919px,每个cell的宽度919/6.666....=137.85就是138px,所以有6个138px宽的cell

  4. 剩下的一个cell的宽度:1000-6*138-27*3=91px

  5. 改变width=17%,上面的算法依然成立。

    http://img1.sycdn.imooc.com//57cd4041000150d012540435.jpg

3 回复 有任何疑惑可以回复我~
#1

侠客岛的含笑

你为什么不用27直接除以1000,
2016-12-28 回复 有任何疑惑可以回复我~

width:1%; 防止没有内容时,造成整个布局的坍塌

1 回复 有任何疑惑可以回复我~
#1

起个名真无语 提问者

那为什么不是min-width:1%;???
2016-06-27 回复 有任何疑惑可以回复我~

可能是格子之间的间隔距离吧

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

为什么 .nav-tabs.nav-justified > li { display: table-cell; width: 1%; }

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信