css 3等分不使用flex（微信不支持）

Question

• 未使用红包
• 已使用红包
• 已过期红包

不好意思 第一次使用这个，我简单介绍下，导航，是水平的，这里没有加css，所以你们看到的应该是垂直的。其长相跟appstore的排行榜是一模一样的。就是个3等分，选中有个背景蓝色，未选中是白色，整体有个蓝色边框。现在的问题是设置宽度33.33％，boxSizing: borderBox;，设置borderLeft： 1px然后设置ul元素marginLeft: -1px, 在选中第3个li的时候右边是有空隙的，一定是宽度没有达到100%，并且还加上了那1px 所以请帮助我下。谢啦。仅iphone与chrome－pc无此问题。

Answer 1

希望这篇文章能给你一点思路：等分div的四种方式（算上评论中的flex）

Answer 2

你用的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;
}

Answer 3

微信不支持伸缩盒最新版的display:flex; 但是支持老版本的display:box;写法，当然是需要-webkit-前缀的。

相关资料：http://css.doyoe.com/properties/flexible-box/index.htm

Answer 4

flex 子元素需要 display: block