css3 - flex布局問題
問題描述
設(shè)計稿:
下面我做的部分,結(jié)果顯示寬度根據(jù)小box里面的內(nèi)容寬度而變化,不知道怎么設(shè)置小box寬度是一樣的,不受里面的內(nèi)容而影響,還有小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> 您的標(biāo)準(zhǔn)體重范圍是:<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; }
問題解答
回答1:要給li設(shè)置寬度 不好使用padding來設(shè)置 只設(shè)置padding 不設(shè)置width 會導(dǎo)致文字內(nèi)容越長,所占用的寬度就越多 因為大家的padding值都是一致的 如果設(shè)置了width,那么大家的寬度一致 所有的左右空白空間便會與你文字內(nèi)容寬度成反比
相關(guān)文章:
1. javascript - 原生canvas中如何獲取到觸摸事件的canvas內(nèi)坐標(biāo)?2. showpassword里的this 是什么意思?代表哪個元素3. mysql scripts提示 /usr/bin/perl: bad interpreter4. css3 - css怎么實現(xiàn)圖片環(huán)繞的效果5. html - vue項目中用到了elementUI問題6. 對mysql某個字段監(jiān)控的功能7. android - 用textview顯示html時如何寫imagegetter獲取網(wǎng)絡(luò)圖片8. JavaScript事件9. css3 - border-bottom 的長度可否超過盒子的寬度呢?實現(xiàn)如下圖效果。(我的書下面的線)10. mysql優(yōu)化 - mysql EXPLAIN之后怎么看結(jié)果進行優(yōu)化 ?
