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>

實現左右對稱,文字換行

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM