問題描述

設計稿：

下面我做的部分，結果顯示寬度根據小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; }

問題解答

要給li設置寬度 不好使用padding來設置 只設置padding 不設置width 會導致文字內容越長，所占用的寬度就越多 因為大家的padding值都是一致的 如果設置了width，那么大家的寬度一致 所有的左右空白空間便會與你文字內容寬度成反比