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

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

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

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

flex 子元素需要 display: block