html 左边任意宽度，右边撑满；

李修缘999

已于 2023-08-25 03:47:06 修改

阅读量141

点赞数

分类专栏：前端文章标签： css 前端 html

于 2023-08-25 03:37:12 首次发布

本文链接：https://blog.csdn.net/m0_47165403/article/details/132487154

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、效果

二、方法1（左边向左悬浮，右边百分百）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #main{
            width: 500px;
            margin: auto;
            border: 1px solid;
            padding: 1rem;
        }
        .father{
            margin: 1rem;

        }
        .left{
            float: left;
            border-bottom: 1px solid white;
        }
        .right{
            border-bottom: 1px solid black;
             width: 100%;
        }

    </style>
</head>

<body>
<div id="main">
    <div class="father">
        <div class="left">姓名：</div>
        <div class="right">&nbsp;</div>
    </div>
    <div class="father">
        <div class="left">身份证号码：</div>
        <div class="right">&nbsp;</div>
    </div>
</div>
</body>
</html>

三、方法2（父层用display: flex; 右边用flex: 1;）

这种语法有些第三方网页转pdf不支持

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #main{
            width: 500px;
            margin: auto;
            border: 1px solid;
            padding: 1rem;
        }
        .father{
            margin: 1rem;
            display: flex;
        }
        .right{
            border-bottom: 1px solid black;
            flex: 1;
        }

    </style>
</head>

<body>
<div id="main">
    <div class="father">
        <div class="left">姓名：</div>
        <div class="right">&nbsp;</div>
    </div>
    <div class="father">
        <div class="left">身份证号码：</div>
        <div class="right">&nbsp;</div>
    </div>
</div>
</body>
</html>