css实现文字两端对齐

最新推荐文章于 2024-08-07 15:38:37 发布

landeying

最新推荐文章于 2024-08-07 15:38:37 发布

阅读量208

点赞数

分类专栏：页面布局

本文链接：https://blog.csdn.net/weixin_43837473/article/details/101300972

版权

页面布局专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<ul>
        <li class="name">
            <label for="">姓<i></i><i></i>名</label>
            <p>XXX</p>
        </li>
        <li>
            <label for="">出生日期</label>
            <p>XXX</p>
        </li>
        <li class="num">
            <label for="">证<i></i>件<i></i>号</label>
            <p>XXX</p>
        </li>
    </ul>

* {
            padding: 0;
            margin: 0;
        }
        ul {
            font-size: 0;
        }
        li {
            padding: 10px 30px;
            border-bottom: 1px solid #ddd;
        }
        li label,
        li p {
            display: inline-block;
            vertical-align: middle;
            width: 50%;
            font-size: 18px;
            color: #333;
            line-height: 40px;
        }
        i {
            display: inline-block;
            vertical-align: middle;
        }
        .name i {
        	<!-- i的大小设置成所在位置文字的大小 -->
            width: 18px;
            height: 18px;
        }
        .num i {
            width: 0.5em;
            height: 0.5em;
        }