首页 > 代码库 > css ul li 左对齐,换行
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>
实现左右对称,文字换行
css ul li 左对齐,换行
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。