码迷,mamicode.com
首页 > Web开发 > 详细

css ul li 左对齐,换行

时间:2017-06-16 20:20:30      阅读:732      评论:0      收藏:0      [点我收藏+]

标签:splay   log   img   ica   lis   换行   top   inline   nbsp   

.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 左对齐,换行

标签:splay   log   img   ica   lis   换行   top   inline   nbsp   

原文地址:http://www.cnblogs.com/silences/p/7029017.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!