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>

实现左右对称，文字换行

 

转载于:https://www.cnblogs.com/silences/p/7029017.html