设计稿:
下面我做的部分,结果显示宽度根据小box里面的内容宽度而变化,不知道怎么设置小box宽度是一样的,不受里面的内容而影响,还有小box之间的间隔要有2px的缝隙。
.result_boxs { display: flex; display: -webkit-flex; display: -ms-flexbox; display: -moz-box; display: -webkit-box; width: 94%; margin: 2px auto 0; } .result_boxs li { -webkit-box-flex: 1; -ms-box-flex: 1; box-flex: 1; padding: 10px 5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-color: #fff; border-radius: 4px; line-height: 1.6; text-align: center; }
要给li设置宽度 不好使用padding来设置 只设置padding 不设置width 会导致文字内容越长,所占用的宽度就越多 因为大家的padding值都是一致的 如果设置了width,那么大家的宽度一致 所有的左右空白空间便会与你文字内容宽度成反比