css 3等分不使用flex（微信不支持）
- 未使用红包
- 已使用红包
- 已过期红包
不好意思 第一次使用这个，我简单介绍下，导航，是水平的，这里没有加css，所以你们看到的应该是垂直的。其长相跟appstore的排行榜是一模一样的。就是个3等分，选中有个背景蓝色，未选中是白色，整体有个蓝色边框。现在的问题是设置宽度33.33％，boxSizing: borderBox;，设置borderLeft： 1px然后设置ul元素marginLeft: -1px, 在选中第3个li的时候右边是有空隙的，一定是宽度没有达到100%，并且还加上了那1px 所以请帮助我下。谢啦。仅iphone与chrome－pc无此问题。
web前端开发 移动端web css 微信 JavaScript
雑音chu
9 years, 5 months ago
Answers
微信不支持伸缩盒最新版的
display:flex;
但是支持老版本的
display:box;
写法，当然是需要
-webkit-
前缀的。
相关资料： http://css.doyoe.com/properties/flexible-box/index.htm
ルカ女王控
answered 9 years, 5 months ago
你用的li，我就用ul>li*3的结构来说明吧。
cssul { border: 1px solid #dddddd; border-radius: 4px; font-size: 0; //这个属性很重要 } li { display: inline-block; width: 33.333333%; box-sizing: border-box; font-size: 1rem; //这里把字体大小重置回来 vertical-align: middle; //无关紧要的属性 } /* 这个是让第2个开始及之后的li都有左边的border，第一个没有，避免由负边距带来的你的问题，你也可以对每个li都加border-left，然后利用first-child伪元素来去掉第一个的左边框 */ li:nth-child(n+2) { border-left: 1px solid #dddddd; }
fasher
answered 9 years, 5 months ago
