css ul li 左对齐,换行
.info-warp { min-height: 20rem; background: #ffffff; text-align: center; padding: 1.4rem; } .jx_ul-info-list { margin: 2rem auto; text-align: left; display: inline-block; list-style-type: none; } .jx_ul-info-list li label { width: 50%; display: inline-block; text-align: right; vertical-align: top; } .jx_ul-info-list li span { width: 50%; display: inline-block; }
<div class="info-warp"> <p class="success-text">恭喜您!报名成功</p> <ul class="jx_ul-info-list"> <li> <label for="">赛事名称:</label><span>Crossfit</span> </li> <li> <label for="">项目名称:</label><span>Crossfit May</span> </li> <li> <label for="">姓名:</label><span>aa</span> </li> <li> <label for="">赛事名称:</label><span>0001</span> </li> <li> <label for="">场馆:</label><span>场馆场馆场馆场馆场馆场馆场馆场馆</span> </li> </ul> <div class="weui_btn_area weui_btn_area_inline"> <a href="javascript:;" class="jx_btn bg-blue2-b">查看我的赛程表</a> <a href="javascript:;" class="jx_btn weui_btn_blue">查看其它项目</a> </div> </div>
实现左右对称,文字换行