关于html不同行的子元素同一对齐的其中一种思路

 

 效果如上图

代码如下：

<html>
<head>
    <title>哈哈哈</title>
</head>
<body>

    <div class="list-item">
        <div class="item-title">昵称:</div>
    </div>

    <div class="list-item">
        <div class="item-title">手机号:</div>
    </div>

<style>
    .list-item {
        margin-top: 3px;
        border-bottom: 3px solid #ddd;
        border-image: linear-gradient(to right, blue, black) 30 30;
    }
    
    .item-title {
        width: 20%;
        text-align: right;
        font-size: 24px;
        font-weight: bold;
    }
</style>
</body>
</html>

　　

起作用的在item-titlte里的width和text-align。

posted @ 2023-03-10 10:57  晓星晨曦  阅读(24)  评论(0)    收藏  举报