css3 - flex布局问题
怪我咯
怪我咯 2017-04-17 11:26:54
0
1
483

设计稿:

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

<ul class="result_boxs archives_gray">
        <li>
            账号/姓名:<br>
            <span>18611444620</span>
        </li>
        <li>
            性别:<br>
            <span>女</span>
        </li>
    </ul>
    <ul class="result_boxs archives_gray">
        <li>
            年龄:<br>
            <span>60岁</span>
        </li>
        <li>
            体重:<br>
            <span>129kg</span>
        </li>
    </ul>
    <ul class="result_boxs archives_orange">
        <li>
            您的BMI值为:<br>
            <span>23.9</span>
        </li>
        <li>
            您的标准体重范围是:<br>
            <span>70kg</span>
        </li>
    </ul>
.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; }

怪我咯
怪我咯

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

répondre à tous(1)
小葫芦

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

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!