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>

實現左右對稱,文字換行javascript

相關文章
相關標籤/搜索