css3 - flex布局问题

 可怜的绷带_565 发布于 2022-11-05 22:23

设计稿:

下面我做的部分,结果显示宽度根据小box里面的内容宽度而变化,不知道怎么设置小box宽度是一样的,不受里面的内容而影响,还有小box之间的间隔要有2px的缝隙。

  • 账号/姓名:
    18611444620
  • 性别:
  • 年龄:
    60岁
  • 体重:
    129kg
  • 您的BMI值为:
    23.9
  • 您的标准体重范围是:
    70kg
.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; }

1 个回答
  • 要给li设置宽度 不好使用padding来设置 只设置padding 不设置width 会导致文字内容越长,所占用的宽度就越多 因为大家的padding值都是一致的 如果设置了width,那么大家的宽度一致 所有的左右空白空间便会与你文字内容宽度成反比

    2022-11-10 19:51 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有