javascript - css 3等分不使用flex（微信不支持）-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

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

怪我咯 2017-04-10 15:26:16

[JavaScript讨论组]

615

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

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

怪我咯

走同样的路，发现不同的人生

全部回复(4)

阿神2017-04-10 15:28:16 4楼

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

赞 +0

添加回复

阿神2017-04-10 15:28:16 3楼

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

赞 +0

添加回复